Question

我正在尝试创建一个Structural Directive，其行为与RouterLinkActive指令相似。

因此，我实现了UnlessDirective示例，并从Angular的RouterLinkActive directive中添加了零件，并通过ContentChildren装饰器获得了子元素。

// 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个问题，其中一个与您的指令的执行直接相关：

您没有导入RouterModule，最重要的是 forRoot(...)，进入您的根模块。因此，锚点您的根组件模板中没有绑定到的实例 RouterLinkWithHref个实例。`
您的指令是结构化的事实并不允许您查询内容子级。这是语言有点棘手，所以我会做一些研究，然后再更新我的答案以后。

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

查询RouterLink和RouterLinkWithHref时，ContentChildren将不会加载任何数据

1 个答案: