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子级并为其添加类属性。为此，您可以在指令构造函数中注入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，以便可以为按钮分配这样的文本/名称：

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

以下是更新的组件代码：

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

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

1 个答案: