我正在Angular 2(和TypeScript)中构建一个模态组件,它将具有不同的视图/页面.它没有标签,但概念非常相似.基本上我很难找到这样做的方法.
在我的模态组件中,我想输出不同的视图/页面.每个都应该是一个组件本身,因为它们没有任何共同的标记.另外,它们将从服务类中获取数据,因此我需要能够为每个视图编写特定的逻辑.
基本上我想要的是:
// Within my modal component's template <div *ngFor="#view of views"> // Render view component here </div>
例如,视图可以是组件的数组.我的第一个主要问题是我不知道如何输出我的视图(组件)的集合.
如何在另一个组件中输出组件集合?
此外,我需要一种隐藏和显示视图的方法,这是视图唯一的共同点.我想在视图中添加一个isActive变量,并根据它显示/隐藏它们.视图组件实现ModalView接口或从基类扩展以添加此逻辑是不好的做法?从我的模态组件,我希望能够控制显示哪个视图,所以我需要视图来共享这个逻辑.
您可以创建一个“组件工厂”作为指令,根据您从模态传递的参数,使用
DynamicComponentLoader加载适当的组件.
<component-factory *ngFor="#view of views" (loaded)="addComponent($event)" [name]="view.name" [visible]="view.visible"></component-factory> @Directive({ selector: 'component-factory' }) class ComponentFactory { @Input() name; @Input() visible; @Output() loaded = new EventEmitter(); constructor( private _dcl: DynamicComponentLoader,private _eref: ElementRef) { // import OneCmp,TwoCmp in this file... private components: { one: OneCmp,two: TwoCmp } ngOnInit() { this._dcl.loadNextToLocation( this.components[this.name],this._eref) // pass values to the loaded components // and send it's instance to the parent .then((ref: ComponentRef) => { ref.instance.visible = this.visible; this.loaded.emit(ref.instance) }); } }