如何访问ng-content? [英] How do i access ng-content?
问题描述
我想访问ng-content的内容,首先要获取内容元素的数量,但是以后会更加出色.
I would like to access the contents of ng-content, to start with just to get a count of content elements, but with more awesomeness later.
例如:
@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);
}
}
我应该把什么作为内容子代的类型?
What do I put as the type for the content children?
它们可以是任何东西.我尝试了ElementRef,但这没用,总是计数为零.
They could be anything. I tried ElementRef, but that didn't work and always gave a count of zero.
使用示例:
<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>
我希望看到内容初始化后:4".
I would expect to see 'after content init: 4'.
推荐答案
我误解了@ContentChildren.它并不代表所有内容.它表示ng-content中的@Components.
I have misunderstood @ContentChildren. It does not represent all content. It represents @Components in ng-content.
直接回答问题:
如果我不提前知道它们的类型,还不清楚如何在ng-content内获取@Components.但是我现在意识到这有点愚蠢:如果我不知道它们是什么,我认为我将如何处理它们?
it is still unclear how i would acquire @Components inside ng-content if i don't know their types ahead of time. But i realise now that was a bit silly: if i don't know what they are, what exactly do i think i'm going to do with them?
间接回答问题:
要访问ng-content的所有内容,我可以在ng-content的父级中引入一个模板变量(#items),并通过@ViewChild将该元素引用为elementRef.然后可以通过这种方式对孩子进行计数:
to access all the contents of ng-content i can introduce a template variable (#items) into the parent of the ng-content and reference that via @ViewChild as an elementRef. Then the children can be counted this way:
@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,并且我知道消费者会将它们放在我组件的内容中:
For others facing similar confusion, i can expand on @ContentChildren a bit more. Say i have 2 @Components: component-a and component-b and i know that consumer will place these inside the content of my component:
<my-component>
<component-a></component-a>
<div>random html</div>
<component-b></component-b>
<component-a></component-a>
</my-component>
然后在我的组件中,我可以获取对各个组件类型的所有实例的引用:
Then in my-component i can aquire references to all instances of the individual component types:
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.
And the console will show that there are 2 component A's and 1 component B.
我应该指出,这是候选版本4.
I should point out that this is at release candidate 4.
这篇关于如何访问ng-content?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!