angular - Angular ContentChildren 访问和操作

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。因此，如果搜索词是“test”，结果是“contest”、“testing”等，那么每个单词的“test”部分将加粗，不匹配的部分将保持正常。我想要ListComponent处理那部分。

这是正确的方法吗？

标签： angular

Answer 1