Twitter bootstrap 从Angular 2输入更改引导工具提示文本

我使用的是Angular 2和Bootstrap 3。我在布局中有一个侧栏和一个主内容屏幕。在侧栏中，用户可以更改内容中项目的工具提示文本

不过，对我开玩笑是因为工具提示文本没有更新。因此，一个对象通过

@Input（）

与工具提示文本一起传递到我的内容面板中。然后通过

[attr.title]=panel.tooltiptext

绑定数据

现在，如果您更新工具提示文本，然后将鼠标悬停在文本上，您会看到工具提示文本未更新，但请继续悬停，您将看到带有正确文本的普通html标题弹出

示例

main.component.ts-这就像我的侧栏，它的级别高于内容面板

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>{{desc}}</h2>

      <tooltip-comp [panel]="panelObj"></tooltip-comp> <br>

      <input [(ngModel)]="panelObj.tooltipText" style="width: 250px;" />
    </div>
  `,
})
export class App implements OnInit {
  desc:string = 'Change tooltip text';
  panelObj = {
    tooltipText: "The Power of the "
  };

  constructor() {}

  ngOnInit() {

  }
}

@组件({
选择器：“我的应用程序”，
模板：`
{{desc}}


`,
})
导出类应用程序实现OnInit{
desc:string='更改工具提示文本'；
panelObj={
tooltipText:“的力量”
};
构造函数（）{}
恩戈尼尼特（）{
}
}

tooltip.component.ts-这是一个内容面板，用于获取包含更新工具提示文本的对象

@Component({
  selector: 'tooltip-comp',
  template: `
    <div>
      <a id="blah" href="#" data-toggle="tooltip" [attr.title]="panel.tooltipText">You Don't Know</a> <br><br>
    </div>
  `,
})
export class TooltipComponent implements OnInit {
  @Input() panel: string;

  constructor() {}

  ngAfterViewInit() {
    $('[data-toggle="tooltip"]').tooltip({container: 'body', html: true});
  }

  ngOnInit() {

  }
}

@组件({
选择器：“工具提示代码”，
模板：`



`,
})
导出类TooltipComponent实现OnInit{
@输入（）面板：字符串；
构造函数（）{}
ngAfterViewInit（）{
$（'[data toggle=“tooltip”]'）。工具提示（{container:'body'，html:true}）；
}
恩戈尼尼特（）{
}
}

您可以使用

数据原始标题

属性动态更新工具提示

[attr.data-original-title]="panel.tooltipText"

---

我在React中使用此选项，但它的行为不符合预期。我正在调整标题

数据原始标题={isTrue？“此文本”：“该文本”}

这是可行的，但您必须将鼠标移出并将鼠标移回才能看到更改。当工具提示已可见时，如何更改文本？