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

Question

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

我试图像那样使用 MatTooltip：

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

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

Answer 1

在 Angular v15 中，您可以使用指令组合 API

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

Answer 2

我自己找到了答案，也许有人也需要这个。 我将在下面分享代码片段。

 @Component({
  selector: 'test-component',
  template: `
   
    <div>test</div>
  `,
  providers: [MatTooltip],
  styleUrls: ['./test.component.scss'],
})

...

constructor(
    private readonly _tooltip: MatTooltip,
  ) {}

...

@HostListener('mouseenter') onMouseEnter(): void {
    this._tooltip.message = 'your message';
    this._tooltip.show();
  }

  @HostListener('mouseleave') onMouseLeave(): void {
    this._tooltip.hide();
  }