我需要以角度动态将组件动态加载到选项卡中 . 我有一个父组件,其中有角度标签 . 在选项卡控件中,我需要动态加载子组件 .
最初当加载选项卡时,它应该加载一个组件1,并且在某些用户交互时,它应该触发事件,该事件将加载其他选项卡和其他子组件以在其中加载 .
我的要求是在每个选项卡中动态加载任何子组件 .
我面临着在选项卡内动态加载子组件而不了解如何继续进行的问题?
我在stackblitz创建了一个POC用于演示
我的父组件如下:
import {Component, ViewChild, AfterViewInit, TemplateRef, ComponentRef, ViewContainerRef} from '@angular/core';
import { ComponentFactoryResolver } from '@angular/core';
import { Component1 } from './Component1';
import { Component2 } from './Component2';
@Component({
selector: 'home',
template: `<mat-tab-group class="demo-tab-group">
<mat-tab *ngFor="let tab of homepageTabs; let i = index" label="{{tab.label}}">
<!--Component1 and Component2 to be loaded here... what is the correct container object which can hold dynamic components ? -->
<ng-template #container>{{tab.templateRef}}</ng-template>
</mat-tab>
</mat-tab-group>`
})
export class HomeComponent {
homepageTabs: any;
@ViewChild('container', { read: ViewContainerRef }) dynamicTabPlaceholder;
constructor(private cfr: ComponentFactoryResolver)
{
//Need to instantiate the components Component1 & Component2 dynamically and load here into the homepageTabs List
const factory = this.cfr.resolveComponentFactory(Component1);
const componentRef = this.dynamicTabPlaceholder.createComponent(factory);
this.homepageTabs = [
{
label: 'HomeLabel',
//templateRef: Component1,//How to assign the component1 instance here?
tabTitle: 'HomeTitle'
},
{
label: 'App Details',
//templateRef: Component2,
tabTitle: 'App Details'
}
];
}
}
我的孩子组件如下所示,
import {Component} from '@angular/core';
@Component({
selector: 'Component1',
template: `Component1 Loaded
<md-list>
<md-list-item class="md-2-line" ng-repeat="item in workbookSheetsList">
<md-checkbox ng-model="item.done"></md-checkbox>
<div class="md-list-item-text">
<h3>{{item.name}}</h3>
</div>
</md-list-item>
</md-list>
`,
//styleUrls: ['./tabs-template-label-example.css']
})
export class Component1 {
workbookSheetsList = [{ "name": "TestReport" }, { "name": "SimpleReport" }, { "name": "Highlighting" }, { "name": "CalculatedColumns" }, { "name": "DateFormat" }, { "name": "KPIIndicator" }];
constructor(){
}
}
我在运行应用程序时遇到以下错误,这表明我无法获得正确的容器引用来创建/加载组件?
TypeError: Cannot read property 'createComponent' of undefined
at new HomePageComponent (homepage.component.ts:76)
at createClass (core.es5.js:10946)
at createDirectiveInstance (core.es5.js:10764)
at createViewNodes (core.es5.js:12205)
at createRootView (core.es5.js:12100)
at callWithDebugContext (core.es5.js:13486)
我很震惊,不知道如何加载要加载到选项卡中的子组件: -
- 什么是容器对象,它可以容纳放在里面的动态组件
<mat-tab-group class="demo-tab-group">
<mat-tab *ngFor="let tab of homepageTabs; let i = index" label="{{tab.label}}">
<div class="demo-tab-content">
<!--Component1 and Component2 to be loaded here... what is the correct container object which can hold dynamic components ? -->
<ng-template #container>{{tab.templateRef}}</ng-template>
</div>
</mat-tab>
</mat-tab-group>
- 如何引用此容器对象并将动态组件分配到其中
{
label: 'HomeLabel',
//templateRef: Component1,//How to assign the component1 instance here?
tabTitle: 'HomeTitle'
},
任何人都可以帮我解决这个问题并告诉我如何进一步处理?
https://stackblitz.com/edit/angular-e7fnhd?file=app%2Fhome.component.ts
2 回答
对于您动态创建的任何组件,您需要在ngModule中将它们添加为
entryComponents
. 这是编译器提示包含工厂以在捆绑中创建它们的提示 .尝试以下方法将子组件加载到另一个组件中 . 我做了如下,它完美地工作 .