Angular 15.1中如何在宿主组件使用MatTooltip指令？

针对你的需求，直接在宿主组件上启用MatTooltip、无需包装组件的正确实现方案如下：

1. 基础准备 #

确保你的模块已经导入MatTooltipModule：

import { MatTooltipModule } from '@angular/material/tooltip';

@NgModule({
  imports: [
    // ...其他模块
    MatTooltipModule
  ]
})
export class YourModule {}

2. 组件中直接绑定MatTooltip到宿主元素 #

利用Angular 14+新增的hostDirectives属性，将MatTooltip指令附加到宿主组件的元素上，再通过注入实例配置提示内容：

import { Component, Host, OnInit } from '@angular/core';
import { MatTooltip } from '@angular/material/tooltip';

@Component({
  selector: 'app-your-host-component',
  template: `<!-- 宿主组件的内容 -->`,
  // 将MatTooltip指令绑定到宿主元素
  hostDirectives: [MatTooltip]
})
export class YourHostComponent implements OnInit {
  // 注入宿主元素上的MatTooltip实例
  constructor(@Host() private tooltip: MatTooltip) {}

  ngOnInit(): void {
    // 设置提示文本
    this.tooltip.message = '这是宿主组件的提示内容';
    // 可选：配置其他tooltip属性，比如位置、显示延迟
    this.tooltip.position = 'above';
    this.tooltip.showDelay = 500;
  }
}

为什么你之前的方案无效？ #

• 直接通过host: {'[attr.matTooltip]': 'some text'}只是给宿主元素添加了普通属性，但MatTooltip是Angular指令，需要被实例化并与元素关联才能生效，单纯的属性绑定无法触发指令初始化。
• 使用ViewContainerRef.createComponent是创建组件实例的方法，而MatTooltip是指令而非组件，因此这种方式完全不适用。

内容的提问来源于stack exchange，提问作者retsuko