Question

这个问题介于Ionic 2和Angular 4之间。我有一个要求，更像是点击或任何事件触发器上预定义离子2自定义组件的页面构建器。

我该如何解决这个问题？我所有的研究都没有让我到那儿。

由于

Answer 1

像工作一样

我终于找到了它。我需要使用componentFactoryResolver。感谢https://blog.thecodecampus.de/angular-2-dynamically-render-components/

以上链接启动了我的目标。我的情况的主要区别是我的PAGE是延迟加载的，我的所有组件都是延迟加载的。因此， page.module.ts 需要在 imports：[] 和子组件中添加 childcomponent.module.ts 需要在 entryComponent：[] 添加.ts 。剩下的就是抓住并倾倒。见下文：

PAGE ngMODULE

import { ChildComponent } from './../../../components/child/child';
import { ChildComponentModule } from '../../../components/child/child.module';
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LessonBuilderPage } from './lesson-builder'; //hosting page

@NgModule({
  declarations: [
    LessonBuilderPage
  ],
  imports: [
    IonicPageModule.forChild(LessonBuilderPage),
    ChildComponentModule
  ],
  exports: [
    LessonBuilderPage
  ],
  entryComponents:[
    ChildComponent 
  ]
})
export class LessonBuilderPageModule {}

<强> PAGE.ts

import { ChildComponent } from './../../../components/child/child';
import { Component,ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { NavController, NavParams, IonicPage } from 'ionic-angular';


@IonicPage()
@Component({
  selector: 'page-lesson-builder',
  templateUrl: 'lesson-builder.html',
})
export class LessonBuilderPage {
  @ViewChild('menucontainer', {read: ViewContainerRef}) menucontainer: ViewContainerRef;
  constructor(public navCtrl: NavController, public navParams: NavParams, private componentFactoryResolver: ComponentFactoryResolver) {

  }
  addcomponent(){
    const childComponent_var = this.componentFactoryResolver.resolveComponentFactory(childComponent);    
    this.menucontainer.createComponent(childComponent_var);

  }



  ionViewDidLoad() {
  }

}

<强> page.html中

<ion-content #pagecontent padding>
    <div #menucontainer>

    </div>
    <button (click)="addcomponent()" ion-button full>Add component</button>
</ion-content>

Ionic 2/3 - 在运行时点击事件上附加自定义组件

1 个答案: