Question

我能够投射内容，但无法获得相同的引用

https://stackblitz.com/edit/angular-khyr1u?file=src%2Fapp%2Fapp.component.html

我尝试使用#SelectorName以及通过 ContentChild（）和ContentChildren（）。尽管调用了ngAfterViewInit钩子，我仍然无法以某种方式获取参考

更新的代码说明：viewchild，viewchildren，contentchild和contentChildren：https://stackblitz.com/edit/angular-wnhayw?file=src/app/course-card/course-card.component.ts

Answer 1

您要寻找的是@ViewChild装饰器，而不是@ContentChild装饰器。

@ContentChild装饰器为您提供对位于组件的开始和结束标记之间的元素的引用：

<my-component>
  <div #myContentChild></div>
</my-component>

@ViewChild装饰器为您提供了组件视图中元素的引用：

my-component.component.html：

<div #myViewChild></div>

在您的示例中，#test元素是my-app的视图子元素和<app-course-card>的内容子元素。这意味着，如果要从#test组件中查询AppComponent，则可以使用@ViewChild。如果要从#test中查询CourseCardComponent，则需要使用@ContentChild。

有关更多详细信息，请参见以下SO帖子：

What's the difference between @ViewChild and @ContentChild?

ContentChild无法通过QueryTemplate和组件引用

1 个答案: