Question

我做了一个指令，该指令继承自Angular Material的MatTooltip。我知道可以从this SO question开始。但是，当我尝试使用它时，出现以下错误：

There is no directive with "exportAs" set to "amgTooltip"

这是指令中的代码，其中包含一个构造函数，该构造函数在super上调用该构造函数。为了简洁起见，下面的代码中未显示。

如您所见，“指令”配置对象的exportAs属性为“ amgTooltip”。

@Directive({
  selector: '[amgTooltip]',
  exportAs: 'amgTooltip'
})
export class AmgTooltipDirective extends MatTooltip {

    constructor(...) {...}

}

此指令已注册到指令模块类中：

import {NgModule} from '@angular/core';
import {AmgTooltipDirective} from './amg-tooltip';

@NgModule({
  imports: [],
  declarations: [AmgTooltipDirective],
  exports: [AmgTooltipDirective]
})
export class DirectivesModule {

}

我们的功能模块在imports部分中引用了此模块：

@NgModule({
  declarations: [...],
  imports: [
    ...,
    DirectivesModule
  ],
  bootstrap: [...]
})

从那里，我们引用amgTooltip的方式与引用matTooltip的方式完全相同：

<mat-icon 
    #icoTooltip="amgTooltip" 
    matTooltip="Tooltip Text"
    matTooltipPosition="after">
        icon_name
</mat-icon>

但是，这是我们得到错误的地方，无法继续进行下去。如果需要，我可以尝试创建一个Plunkr，但是我目前还没有一个。

我犯了什么愚蠢的错误？谢谢

Answer 1

将amgTooltip添加到mat-icon元素即可。

<mat-icon 
    amgTooltip
    #icoTooltip="amgTooltip" 
    matTooltip="Tooltip Text"
    matTooltipPosition="after">
        icon_name
</mat-icon>

没有将“ exportAs”设置为“ amgTooltip”的指令

1 个答案: