我如何访问 ng-content？

Question

我想访问 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>

我希望看到“内容初始化后：4”。

Answer 1

我误解了@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>

然后在我的组件中，我可以获取对各个组件类型的所有实例的引用：

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 中。