Question

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

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

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

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

＆LT; button type =“button”class =“btn btn-secondary”ngbTooltip =“tipContent”initObject =“Top”＆gt; Farid测试＆lt; / 按钮＆GT;但它给了我错误

我正在使用最新版本的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");
}

}

动态工具提示角度2 /打字稿＆amp; NG自举

0 个答案: