我一直在尝试制作选项卡视图，并认为内容投影可能是一个不错的方法。我从这篇文章中学到了它。我认为我可以通过输入给定的组件数组来使其动态化，它们将显示为所选选项卡的页面。
这是我这样做的尝试：
@Component({
selector: 'my-app',
template:`
<h1>Experiments</h1>
<button class="add-button" (click)="add()">Add</button>`
})
export class App {
components:Array<any> = [PrepSetupTab,FinalizeTab]
constructor(private cdr: ChangeDetectorRef,
private compFR: ComponentFactoryResolver,
private viewContainer: ViewContainerRef ){}
add():void{
var transTabRefs: Array<any>= []
this.components.forEach(tabComponent=>{
let compFactory = this.compFR.resolveComponentFactory(tabComponent);
let compRef = this.viewContainer.createComponent(compFactory);
let tabFactory = this.compFR.resolveComponentFactory(Tab);
let transcludedTabRef = this.viewContainer.createComponent(tabFactory,this.viewContainer.length - 1, undefined, [[compRef.location.nativeElement]]);
transTabRefs.push(transcludedTabRef.location.nativeElement);
})
let tabsFactory = this.compFR.resolveComponentFactory(Tabs); // notice this is the tabs not tab
this.viewContainer.createComponent(tabsFactory,0,undefined,[transTabRefs]);
}
}
旁注，add(( 作为按钮的点击处理程序不是避免此错误的预期功能："EXCEPTION: Expression has changed after it was checked".如果我把它放在任何生命周期钩子中，我就会得到这个错误。虽然这是一个以后要处理的挑战。
所以基本上我正在创建数组中的每个组件，然后将它们作为每个创建的选项卡组件的 ng 内容粘贴。然后获取每个选项卡组件并将其粘贴到选项卡组件的 ng 内容中。
问题是选项卡组件永远不会找到动态创建的选项卡子项的内容子项。下面是选项卡组件的代码，其中未定义内容子项。
@Component({
selector: 'tabs',
template:`
<ul class="nav nav-tabs">
<li *ngFor="let tab of tabs" (click)="selectTab(tab)" [class.active]="tab.active">
<a>{{tab.title}}</a>
</li>
</ul>
<ng-content></ng-content>
`
})
export class Tabs implements AfterContentInit {
@ContentChildren(Tab) tabs: QueryList<Tab>;
// contentChildren are set
ngAfterContentInit() {
// get all active tabs
let activeTabs = this.tabs.filter((tab)=>tab.active);
// if there is no active tab set, activate the first
if(activeTabs.length === 0) {
this.selectTab(this.tabs.first);
}
}
selectTab(tab: Tab){
// deactivate all tabs
this.tabs.toArray().forEach(tab => tab.active = false);
// activate the tab the user has clicked on.
tab.active = true;
}
}
我似乎很清楚，选项卡组件是在不同的时间创建的，然后当我需要从选项卡组件中将它们作为内容子级访问时。我也尝试过使用ChangeDetectionRef.changeDetect((，但这没有帮助。
也许通过内容投影来做到这一点并不是最简单的方法或最好的方法，所以我愿意接受建议。这是扑通，谢谢！
@ContentChildren不适用于动态创建的组件。
为什么？
这是因为投影的候选对象必须在编译时知道。
这是用于计算ContentChildren的函数
function calcQueryValues(view, startIndex, endIndex, queryDef, values) {
for (var /** @type {?} */ i = startIndex; i <= endIndex; i++) {
var /** @type {?} */ nodeDef = view.def.nodes[i];
var /** @type {?} */ valueType = nodeDef.matchedQueries[queryDef.id];
if (valueType != null) {
values.push(getQueryValue(view, nodeDef, valueType));
}
它使用在组件的viewDefinition中声明的节点。 当您通过createComponent创建tabs组件并手动传递可投影节点viewDefinition您没有更改选项卡组件工厂时，因此角度不会知道动态节点。
一个可能的解决方案可能是手动初始化选项卡
你可以在这个Plunkr中观察到它
看看我在这里给出的示例 动态地向 DOM 添加元素，也许你会发现那里对你的问题有帮助。此时，在您的 plnkr 中，选项卡数组为空。