1

我有时一直面临这个问题，我正在尝试在我的项目上创建一个动态工具提示。我在 Oninit 上创建了 if else 语句，

if(this._placement== 'left') .....，在我的模板中：...在顶部，我应该将工具提示放置在浏览器的左侧。

我在我的模板中对此进行了编码，但我不确定如何让它根据我在 ngOnInit 上设置的行为进行操作。例如，我希望我的按钮具有正确的工具提示。

我尝试使用它，但它不起作用并返回错误。我尝试的另一种方法，它只是返回默认工具箱，而不是我试图设置为显示左侧位置的设置。

< button type="button" class="btn btn-secondary" ngbTooltip="tipContent" initObject="Top" > Farid 测试</button> 但它给了我错误

我正在为我的工具提示使用最新版本的 angular 2 和 Ng-Bootstrap

任何帮助将不胜感激。太感谢了 。 

import {
Component,
Input,
OnInit
} from '@angular/core';
import {NgbTooltipConfig} from '@ng-bootstrap/ng-bootstrap';

@Component({
selector: 'message-info',
template:`


<template #tipContent>Hello, <b>{{_name}}</b>!</template>
<button type="button" class="btn btn-secondary" [ngbTooltip]="tipContent"> Farid Test </button>


<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>



<button type="button"  ngbTooltip = "farrrrrrriiiiddddd" >
testing Mofo
</button>  `,
 providers : [NgbTooltipConfig] })

export class MessageInfo implements OnInit {

private _name: string = 'Farid';
private _icon: string = '';

private _iconError: string = 'Error';
private _iconWarning: string = 'Warning';
private _iconInformation: string = 'Information';

private _placement : string ='';

@Input() config: any;

constructor(config: NgbTooltipConfig) {

config.placement = 'bottom';
config.triggers = 'hover';

if (this._placement == 'Right') {
        //Right placement
        this.config.placement = 'right';
        this.config.triggers = 'hover';

}

}

ngOnInit() {




 if(this._placement =='Top'){

        //top placement
        this.config.placement = 'Top';
        this.config.triggers = 'hover';


}

else if (this._placement == 'left'){
        //Left placement 
        this.config.placement = 'left';
        this.config.triggers = 'hover';

}

/*else if (this._placement == 'Right') {
        //Right placement
        this.config.placement = 'right';
        this.config.triggers = 'hover';
}*/

else if (this._placement == 'Bottom') {
        //Bottom placement 
        this.config.placement = 'bottom';
        this.config.triggers = 'hover';

} else if (this._icon == 'Error'){
    //Display Error Icon 

} else if (this._icon == 'Warning') {
    //Display Warning Icon 
} else if (this._icon == 'Information') {
    //Display information Icon 
} else  {

        //default placement bottom 
        this.config.placement = 'bottom';
        this.config.triggers = 'hover';
        //Default Icon 
}



console.log(this.config);


}



}

这是我的第二个文件

 import { Component } from '@angular/core';
 import { PageBase, PageBaseEvent } from "../../components/page-    base.component";
  import {
Router,
NavigationEnd
  } from '@angular/router';
  @Component({
selector: 'kd-test-alert',
template: `
    <kd-message-info [config]="_messageConfig" ></kd-message-info>

`
  })

  export class ExampleMessageInfo extends PageBase {
  private _messageConfig: any = {
    icons : " Error , Warning ,  Information" ,
    placement : " Top , Bottom , Left , Right",
    description : "Showing text"
};

constructor(
    protected _pageEvent:PageBaseEvent,
    protected _router: Router
) {
    super(_pageEvent, _router); 
    super.setPageTitle("Message Info");
}

}

4

0 回答 0