在Angular 2中,可以通过使用@Input
装饰器将子内容传递给指令。
首先,创建一个指令:
import { Directive, Input, ElementRef } from '@angular/core';
@Directive({
selector: '[myDirective]'
})
export class MyDirective {
constructor(private el: ElementRef) { }
@Input('myDirective') myContent: string;
ngOnInit() {
this.el.nativeElement.innerHTML = this.myContent;
}
}
然后,在使用该指令的组件中,将子内容传递给指令:
在上面的示例中,我们将子内容"Child content"传递给了名为myDirective
的指令。
请注意,@Input
装饰器用于定义一个输入属性,它接收来自父组件的值。在这个例子中,我们将myDirective
作为指令的输入属性,并将子内容传递给它。
最后,指令的ngOnInit
生命周期钩子中,我们将传递的子内容设置为指令所在元素的innerHTML
。
这样,子内容就会被传递给指令,并渲染到指令所在的元素中。