将 MatTooltip 与主机 Angular 组件一起使用答案

【问题标题】：Use MatTooltip with host Angular component将 MatTooltip 与主机 Angular 组件一起使用
【发布时间】：2023-01-13 02:48:56
【问题描述】：

我正在使用 Angular 15.1 和 Angular Material 15.1，我需要对主机组件使用 MatTooltip 指令。我知道我可以创建一个包装器并使用工具提示属性 - 但我需要一个包含主机组件的解决方案。

我试图像那样使用 MatTooltip：

 host: {
    '[attr.matTooltip]': 'some text',
  }

以及 ViewContainerRef、createComponent 方法和 @HostListener，但没有一个选项有效

【问题讨论】：

你试过@HostBinding了吗？这个问题可能与this重复

标签： angular angular-material

【解决方案1】：

在 Angular v15 中你可以使用Directive composition API

@Component({
  selector: 'test',
  template: 'test.html',
  hostDirectives: [{
    directive: MatTooltip,
    inputs: [...],
    outputs: [...],
  }],
})
export class TestComponent { }

【讨论】：