私はかなり頻繁にこの問題に直面してきました。プロジェクトで動的なツールチップを作成しようとしています。Oninit で if else ステートメントを作成しました。
if(this._placement== 'left' ) ..... 、私のテンプレート...では: 上部に、ツールチップの配置がブラウザーの左側になるようにする必要があります。
これをテンプレートにコーディングしましたが、ngOnInit で設定した動作に従ってどのように動作させることができるかわかりません。たとえば、ボタンに正しいツールチップを表示したいです。
これを使用してみましたが、機能せず、エラーが返されます。私が試した他の方法は、左の配置を表示するように設定しようとした設定ではなく、デフォルトのツールピットを返すだけです。
< button type="button" class="btn btn-secondary" ngbTooltip="tipContent" initObject="Top" > Farid Test </ 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);
}
}
これは私の 2 番目のファイルです
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");
}
}