將 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();
  }