angular – 如何访问ng-content?
发布时间:2020-12-17 17:41:49 所属栏目:安全 来源:网络整理
导读:我想访问ng-content的内容,首先来获取内容元素的数量,但稍后会有更多的精彩内容. 例如: @Component({selector: 'my-container',template: ` div class="my-container" div class="my-container-nav"a class="my-container-previous"/a/div div class="my-co
我想访问ng-content的内容,首先来获取内容元素的数量,但稍后会有更多的精彩内容.
例如: @Component({ selector: 'my-container',template: ` <div class="my-container"> <div class="my-container-nav"><a class="my-container-previous"></a></div> <div class="my-container-body"> <div class="my-container-items"> <ng-content></ng-content> </div> </div> <div class="my-container-nav"><a class="my-container-next"></a></div> </div> ` }) export class MyContainer implements AfterContentInit { @ContentChildren(???) containerItems : QueryList<???>; ngAfterContentInit() { console.log('after content init: ' + this.containerItems.length); } } 我将什么作为内容儿童的类型? 它们可以是任何东西.我尝试过ElementRef,但这不起作用,总是给出一个零的数. 使用示例: <my-container> <div>some content here</div> <another-component [title]="'another component there'"></another-component> <div>there's lots of content everywhere</div> <span>no assumptions would be fair</span> </my-container> 我希望看到“在内容init:4之后”. 解决方法
我误解了@ContentChildren.它并不代表所有内容.它代表ng-content中的@Components.
直接回答这个问题: 如果我不提前知道他们的类型,我还不清楚如何在ng-content中获得@Components.但我现在意识到这有点傻:如果我不知道它们是什么,我认为我究竟会怎样对待它们? 间接回答这个问题: 要访问ng-content的所有内容,我可以将模板变量(#items)引入ng-content的父级,并通过@ViewChild作为elementRef引用.然后孩子们可以这样计算: @Component({ selector: 'my-container',template: ` <div class="my-container"> <div class="my-container-nav"><a class="my-container-previous"></a></div> <div class="my-container-body"> <div #items class="my-container-items"> <ng-content></ng-content> </div> </div> <div class="my-container-nav"><a class="my-container-next"></a></div> </div> ` }) export class MyContainer implements OnInit { @ViewChild('items') items: ElementRef; ngOnInit() { console.log('count is: ' + this.items.nativeElement.children.length); } } 对于面临类似困惑的其他人,我可以更多地扩展@ContentChildren.假设我有2个@Components:component-a和component-b,我知道消费者会将这些放在我的组件的内容中: <my-component> <component-a></component-a> <div>random html</div> <component-b></component-b> <component-a></component-a> </my-component> 然后在my-component中,我可以获取对各个组件类型的所有实例的引用: export class MyContainer implements AfterContentInit { @ContentChildren(ComponentA) componentAInstances: QueryList<ComponentA>; @ContentChildren(ComponentB) componentBInstances: QueryList<ComponentB>; ngAfterContentInit() { console.log('count of component A: ' + this.componentAInstances.length); console.log('count of component B: ' + this.componentBInstances.length); } } 控制台将显示有2个组件A和1个组件B. 我应该指出,这是发布候选人4. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |