在宿主Angular组件中使用MatTooltip

Question

我正在使用Angular 15.1 &Angular Material 15.1和我需要在主机组件中使用MatTooltip指令。我知道我可以创建一个包装器并使用tooltip属性-但是我需要一个解决方案与主机组件。

我尝试像这样使用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();
}