我正在使用 Angular 5,我想根据需要创建组件的新实例。
这是我目前拥有的代码:
应用程序组件.ts:
import { Component } from '@angular/core';
import { MyComponent } from './mycomp/my.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor() {}
addCmp() {
console.log('adding');
// Add an instance of MyComponent code goes here ?
}
}
应用程序组件.html
<button (click)="addCmp()" >Add New MyComponent below</button>
我的组件.html:
<div>I am MyComponent</div>
我怎样才能做到这一点?
这是自己创建组件的方法:
(不要忘记销毁它!在 componentRef 上调用 destroy() 来执行此操作)
父组件:
@ViewChild('componentHolder', { read: ViewContainerRef }) componentHolder: ViewContainerRef;
constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
public createComponent(): void {
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(MyComponent);
const componentRef = this.componentHolder.createComponent(componentFactory);
}
父组件 HTML:
<button (click)="createComponent()">Add New MyComponent below</button>
<div #componentHolder ></div>
在 NgModule 中添加 MyComponent:
...
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(appRoutes),
],
entryComponents: [
MyComponent
],...
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)