gpt4 book ai didi

angular - 使用具有嵌套指令的 viewChildren 获取子级

转载 作者:行者123 更新时间:2023-12-02 03:04:15 27 4
gpt4 key购买 nike

我正在尝试在我的 Angular 应用程序中实现一些功能。我创建了一个父指令 appParent 和另外两个指令 appChildAbcappChildXyz

我想要做的是,每当我将 appParent 指令应用于元素时,我想检查其子元素(同一组件中的 native HTML 元素)并应用一些逻辑这些子元素。

经过大量搜索和斗争,我找到了一种方法,使用 ParentDirective 中的 ViewContainerRefAppComponent 中的 @ViewChildren 来实现这一点,但我必须使用 ((this.viewContainerRef as any)._view.nodes),这看起来不是正确的方法。

有没有其他方法可以获取父指令中子元素的引用??

示例 stackblitz here

请随意 fork 代码并根据需要进行更新。提前致谢

家长指令

export class ParentDirective {
constructor(private vcr: ViewContainerRef) {}

ngAfterViewInit() {
console.log((this.vcr as any)._view.nodes);
let lists = (this.vcr as any)._view.nodes.filter(
x => x.constructor.name === "QueryList"
);
lists.forEach(list => {
list.toArray().forEach(x => {
if (x.constructor.name === "ChildXyzDirective")
x.elementRef.nativeElement.style.background = "red";
else x.elementRef.nativeElement.style.background = "green";
console.log(x);
});
});
}
}

App.component.ts

export class AppComponent  {
name = 'Angular';
@ViewChildren(ChildXyzDirective) xyzChildren: QueryList<ChildXyzDirective>;
@ViewChildren(ChildAbcDirective) abcChildren: QueryList<ChildAbcDirective>;
}

App.component.html

<div appParent>
Parent div directive
<div appChildAbc>
Abc Child directive 1
</div>
<div appChildAbc>
Abc Child directive 2
<div appChildXyz>
Xyz Child directive 1
</div>
<div appChildXyz>
Xyz Child directive 2
</div>
</div>

最佳答案

您可以使用@ContentChildren装饰器来查询子指令

家长指示

@Directive({
selector: "[appParent]"
})
export class ParentDirective {

@ContentChildren(ChildXyzDirective,{descendants: true})
xyzChildren : QueryList<ChildXyzDirective>;

@ContentChildren(ChildAbcDirective,{descendants: true})
abcChildren : QueryList<ChildAbcDirective>;

ngAfterContentInit() {

this.abcChildren.forEach(e => {
e.elementRef.nativeElement.style.background = "red";
});

this.xyzChildren.forEach(e => {
console.log(e)
e.elementRef.nativeElement.style.background = "green";
});

}
}

ContentChildren Use to get the QueryList of elements or directives from the content DOM. Any time a child element is added, removed, or moved, the query list will be updated, and the changes observable of the query list will emit a new value.

demo 🚀

关于angular - 使用具有嵌套指令的 viewChildren 获取子级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59387841/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com