如何在 angular 4 及更高版本的组件上使用我自己的自定义指令

Question

我想这样使用：

<v-button uppercase>test</v-button>

我的组件和指令如下：

@Component({
    selector: "v-button",
    template: "<button class="if component has uppercase directive set 'uppercase css class' here"></button>"
})
export class ButtonComponent{
}

@Directive({
   selector : "[uppercase]"
})
export class UppercaseDirective{
}

我希望这样：

<button class="uppercase">test</button>

感谢您的帮助。

解决方案：感谢@Wand Maker 给我提示

@Component({
selector: "v-button",
template: "<button #uppercaseFlag class="if component has uppercase directive set 'uppercase css class' here"></button>"
})
export class ButtonComponent{
 @ViewChild('uppercaseFlag') uppercaseElement: ElementRef;
}

@Directive({
 selector : "[uppercase]",
 providers : [ButtonComponent]
})
export class UppercaseDirective{
 ngAfterContentInit(): void {
 this.renderer.addClass(this.button.uppercaseElement.nativeElement, "uppercase");
 }
 constructor(private readonly renderer: Renderer2, private readonly button: ButtonComponent) { }
 }

Answer 1

该指令需要访问 button 子项并向其添加 class 属性。为此，您可以在指令构造函数中注入 ElementRef 以获取对宿主元素 v-button 的引用，然后等待组件初始化 - 然后在 ngAfterContentInit 方法中 - 您可以将 uppercase 样式分配给 v-button 的第一个子元素 - 这将是一个 button 元素。如果您更改 v-button 的模板，您可能需要调整这部分代码。

指令代码如下：

@Directive({
   selector : "[uppercase]"
})
export class UppercaseDirective implements  AfterContentInit {
  constructor(private el: ElementRef) {
  }

  ngAfterContentInit() {
    this.el.nativeElement.children[0].className='uppercase';
  }
}

此外，您可能还想将 v-button 模板更新为 ng-content，这样按钮就可以像这样分配 text/name：

 <v-button uppercase>Test</v-button>

这是更新的组件代码：

@Component({
    selector: "v-button",
    template: "<button><ng-content></ng-content></button>"
})
export class ButtonComponent{
}

如何在 angular 4 及更高版本的组件上使用我自己的自定义指令

How to use my own custom directive on my component in angular 4 and above

angular-directive

angular-components

angular