小开

最佳答案

可以使用 @Directive注释的 exportAs属性。它导出要在父视图中使用的指令。从父视图，您可以将它绑定到一个视图变量，并使用 @ViewChild()从父类访问它。

混蛋的例子:

@Directive({
selector:'[my-custom-directive]',
exportAs:'customdirective'   //the name of the variable to access the directive
})
class MyCustomDirective{
logSomething(text){
console.log('from custom directive:', text);
}
}


@Component({
selector: 'my-app',
directives:[MyCustomDirective],
template: `
<h1>My First Angular 2 App</h1>


<div #cdire=customdirective my-custom-directive>Some content here</div>
`
})
export class AppComponent{
@ViewChild('cdire') element;


ngAfterViewInit(){
this.element.logSomething('text from AppComponent');
}
}

更新

正如在评论中提到的，除了上述方法，还有另一种方法。

可以直接使用 @ViewChild(MyCustomDirective)或 @ViewChildren(MyCustomDirective)，而不使用 exportAs

下面是一些代码来演示这三种方法之间的区别:

@Component({
selector: 'my-app',
directives:[MyCustomDirective],
template: `
<h1>My First Angular 2 App</h1>


<div my-custom-directive>First</div>
<div #cdire=customdirective my-custom-directive>Second</div>
<div my-custom-directive>Third</div>
`
})
export class AppComponent{
@ViewChild('cdire') secondMyCustomDirective; // Second
@ViewChildren(MyCustomDirective) allMyCustomDirectives; //['First','Second','Third']
@ViewChild(MyCustomDirective) firstMyCustomDirective; // First


}

更新

另一个更清晰的柱塞

小开

由于@Abdulrahman 的回答，指令不能再从 @ViewChild或 @ViewChildren访问，因为它们只能传递 DOM 元素本身上的项。

相反，您必须使用 @ContentChild/@ContentChildren访问指令。

@Component({
selector: 'my-app',
template: `
<h1>My First Angular 2 App</h1>


<div my-custom-directive>First</div>
<div #cdire=customdirective my-custom-directive>Second</div>
<div my-custom-directive>Third</div>
`
})
export class AppComponent{
@ContentChild('cdire') secondMyCustomDirective; // Second
@ContentChildren(MyCustomDirective) allMyCustomDirectives; //['First','Second','Third']
@ContentChild(MyCustomDirective) firstMyCustomDirective; // First
}

@Component属性上也不再有 directives属性。

小开

2019年以来唯一剩下的解决方案

正如在其他答案的评论中提到的，这些其他(以前有效的)方法不适用于 Angular 的最新版本。

然而，令人欣喜的是，有一种更简单的方法来注入它: 直接从构造函数！

@Component({
// ...
})
export class MyComponent implements OnInit {


// Would be *undefined*
// @ContentChild(MyDirective, { static: true })
// private directive: MyDirective;


constructor(private directive: MyDirective) { }


ngOnInit(): void {
assert.notEqual(this.directive, null); // it passes!
}
}

此外，你可以添加多个注释来告诉依赖注入引擎在哪里查找要注入的内容，例如使用 @ Self或者 @ 可选

获取对组件中使用的指令的引用

2019年以来唯一剩下的解决方案