javascript - 如何在组件初始化时显示 Angular Material 工具提示

标签 javascript angular angular-material

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

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

我尝试过以下方法:

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

最佳答案

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。希望有帮助。

关于javascript - 如何在组件初始化时显示 Angular Material 工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54410370/

相关文章:

javascript - 删除包裹元素的句子

javascript - 如何使用 jQuery 记录函数的执行而不是在同一个 DIV 上再次运行它

如果有 401 响应, Angular 拦截器会注销应用程序吗?

angular - cdk 使用 HTML 表格进行虚拟滚动

html - 如何将汉堡包菜单放入谷歌地图等文本框中?

javascript - 如何使用 jQuery 或 JavaScript 将 13 位数字转换为日期而不显示时间?

Angular 分离登录和应用组件

angular - 来自 Angular 5 中的 json 对象的动态嵌套 Material 菜单

angular-material - 在 Angular Material 中没有输入数据时强制标签 float

javascript - 如何将从文件读取的 JSON 数据转换为 JSON 对象