angular - ContentChildren 在查询 RouterLink 和 RouterLinkWithHref 时不会加载任何数据

Question

我正在尝试创建一个 Structural Directive其行为类似于 RouterLinkActive指令。

所以我实现了 UnlessDirective示例并添加了 Angular 的 RouterLinkActive directive 中的部分它通过 ContentChildren 获得 child 的地方装饰器。

// TODO(issue/24571): remove '!'.
@ContentChildren(RouterLink, { descendants: true })
links !: QueryList<RouterLink>;

// TODO(issue/24571): remove '!'.
@ContentChildren(RouterLinkWithHref, { descendants: true })
linksWithHrefs !: QueryList<RouterLinkWithHref>;

我的模板是这样的:

<p *appUnless="false">
    This paragraph is displayed because the condition is false.
    <a routerLink="/another-page">my link</a>
</p>

我尝试访问链接:

ngAfterContentInit(): void {
    console.log("links length", this.links.length);
    console.log("linksWithHrefs length", this.linksWithHrefs.length);
}

问题是，links 和 linksWithHrefs 变量从来没有填充任何内容。我错过了什么？完整代码在 this stackblitz .我正在使用 Angular 7。

Answer 1

有 2 个问题，一个与您的指令的执行直接相关:

1. 您没有导入 RouterModule，最重要的是调用forRoot(...)，进入你的根模块。为此， anchor 在您的根组件模板中不受限于RouterLinkWithHref 实例。`

2. 您的指令是结构化的这一事实并不允许您查询内容子项。这里是语言的地方有点棘手，所以我会做一些研究并更新我的答案稍后。

目前，如果您基本上通过一个属性将指令重构为 in this stackblitz ，它将按预期工作。