如何在组件初始化时显示Angular Material Tooltip

Question

我想在初始化/加载组件时显示Angular Material工具提示。

我知道我可以添加HTML属性以在事件发生时显示它。我的总体目标是在组件加载时显示工具提示，然后在几秒钟后隐藏。

我尝试了以下操作：

<div (load)="tooltip.show()"
     #tooltip="matTooltip"
     matTooltip="blah blah">
</div>

Answer 1

YoukouleleY 几乎正确，您需要将其放入 ngAfterViewInit（）并添加 setTimeout（）才能使其正常工作：

@ViewChild('tooltip') tooltip: MatTooltip;

constructor(private cd: ChangeDetectorRef) { }

ngAfterViewInit() {
   this.tooltip.show();
   this.cd.detectChanges();
   setTimeout(() => this.tooltip.hide(2000));
}

---

添加了带有changeDetectorRef的更新，以避免ExpressionChangedAfterItHasBeenCheckedError。希望有帮助。

Answer 2

尝试一下：

@ViewChild('tooltip') tooltip: MatToolTip;

ngOnInit() {
  this.tooltip.show();
  this.tooltip.hide(2000);
}