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

我有一个组件，其模板如下所示：

<div [my-custom-directive]>Some content here</div>

这里有一些内容

我需要访问此处使用的

MyCustomDirective

类实例。当我想要访问子组件时，我使用

ViewChild

查询

---

是否具有访问子指令的等效功能？

您可以使用

@directive

注释的

exportAs

属性。它导出要在父视图中使用的指令。从父视图，您可以将其绑定到视图变量，并使用

@ViewChild（）

从父类访问它

例如：

@指令({
选择器：“[我的自定义指令]”，
exportAs:'customdirective'//访问该指令的变量的名称
})
类MyCustomDirective{
日志（文本）{
log（'来自自定义指令：'，文本）；
}
}
@组成部分({
选择器：“我的应用程序”，
指令：[MyCustomDirective]，
模板：`
我的第一个Angular 2应用程序
这里有一些内容
`
})
导出类AppComponent{
@ViewChild（“cdire”）元素；
ngAfterViewInit（）{
this.element.logSomething（'来自AppComponent的文本'）；
}
}

更新

如评论中所述，上述方法还有另一种替代方法

可以直接使用

@ViewChild（MyCustomDirective）

或

@ViewChildren（MyCustomDirective）

下面是一些代码来演示这三种方法之间的差异：

@组件({
选择器：“我的应用程序”，
指令：[MyCustomDirective]，
模板：`
我的第一个Angular 2应用程序
弗斯特
第二
第三
`
})
导出类AppComponent{
@ViewChild（'cdire'）secondMyCustomDirective；//秒
@ViewChildren（MyCustomDirective）所有MyCustomDirections；/['First'，'Second'，'Third']
@ViewChild（MyCustomDirective）firstMyCustomDirective；//First
}

更新

---

看来自从@Abdulrahman给出答案后，指令就不能再从

@ViewChild

或

@ViewChildren

访问，因为这些指令只传递DOM元素本身上的项

相反，您必须使用

@ContentChild

/

@ContentChildren

访问指令

@组件({
选择器：“我的应用程序”，
模板：`
我的第一个Angular 2应用程序
弗斯特
第二
第三
`
})
导出类AppComponent{
@ContentChild（'cdire'）secondMyCustomDirective；//秒
@ContentChildren（MyCustomDirective）所有MyCustomDirections；/['First'，'Second'，'Third']
@ContentChild（MyCustomDirective）firstMyCustomDirective；//First
}

@Component

属性上也不再有

指令

属性。

自2019年以来唯一剩下的解决方案 如其他答案的评论中所述，这些其他（以前有效的）方法不适用于Angular的最新版本

---

然而，值得庆幸的是，有一种更简单的方法可以将其注入：直接从构造函数中注入

@组件({
// ...
})
导出类MyComponent实现OnInit{
//将是*未定义的*
//@ContentChild（MyDirective，{static:true}）
//私人指令：MyDirective；
构造函数（私有指令：MyDirective）{}
ngOnInit（）：void{
assert.notEqual（this.directive，null）；//它通过了！
}
}

---

此外，您可以添加多个注释来告诉依赖项注入引擎在何处查找要注入的内容，例如使用“答案很好”。但是这也可以在没有cdire的情况下直接完成，比如，

@ViewChild（MyCustomDirective）元素：MyCustomDirectivengAfterViewInit-this.element.logSomething（'text from…'）

中。那么，为什么直接通过传递您可以这样做的类型来实现您的方法呢？只是为了澄清一下，你的方法很好。但是，它假定只有一个

MyCustomDirective

。如果有多个指令，它将匹配第一个指令。但是，当使用

exportAs

时，您可以指定任何一个特定元素，例如，第二个

MyCustomDirective

。如果模板包含多个匹配的元素，则使用模板变量可以更容易地指出单个元素。它总是取决于你真正想要完成的事情和你的处境。如果您想获得全部，那么您也可以使用

@ViewChildren（）

我同意，但是如果您有多个指令，您也可以传递适当的类型。不是吗？另一个选项是在ViewChildren中使用{read:SomeType}参数，如下所述：。例如：

@ViewChild（'cdire'，{read:MyCustomDirective}）secondMyCustomDirective:MyCustomDirective

，和

Second

（无需导出）。使用@ContentChild创建的实例未定义。为什么？例如，在组件函数

中，this.firstMyCustomDirective

是

未定义的

ContentChild或ViewChild似乎不起作用，并返回未定义的变量。我认为存在一些误解。截至2019年，这似乎不正确，ContentChild和ViewChild在NgafterViewInit中似乎都返回未定义的值这有多干净！fwiw it

Self（）。（womm）