Question

我有一个组件，它将使用ng-content传递将在屏幕上输出的元素列表。我想使用ng-content，以便父组件（实现列表的组件）可以确定列表元素的样式。实施后会看起来像这样：

<!-- app.component.html -->
<list-component>
    <li #result *ngFor="result of results$ | async"> { result.title } </li>
</list-component>

还有List组件类：

<!-- list.component.ts -->
export class ListComponent {
    @ContentChildren('result') results: QueryList<ElementRef>;
}
ngAfterContentInit() {
    this.results.changes.subscribe((changes: any) => console.log(changes))
}

所做的更改已记录到控制台，但是一旦我将引用变量#result添加到li中的app.component.html元素中，li上的内容就不会更长的节目。它仍然为每个li元素显示一个项目符号，但result.title不再显示。

那是为什么？我该怎么做才能使这些出现？

我的最终目标是让ListComponent使用ContentChildren变量并在元素上循环，并在该li元素中加粗搜索词。因此，如果搜索词为“测试”，而结果为“竞赛”，“测试”等，则每个单词的“测试”部分将以粗体显示，而不匹配的部分将保持正常。我希望ListComponent处理该部分。

这是这样做的正确方法吗？

Answer 1

这是因为您在result范围内定义了两个<li ...。一个来自模板变量#result，另一个来自*ngFor=“let result of results”。您应该将其更改为类似#resultTemplate的唯一名称，这样它就不会与组件的任何变量重叠。

Angular ContentChildren访问和操纵

1 个答案: