Angular Ionic 2-从简单的角度2组件创建模态（不创建与Ionic NavParams和NavController的耦合）

一切都在标题里

我想从我的常规angular 2组件创建模态。 问题是，我们需要注入NavParams来检索参数，并注入NavController来关闭模式

谢谢

---

编辑：我已经发布了一个答案，但也许有更好的答案。再次感谢。

一个可能的解决方案是创建一个通用包装器作为模态，用于实例化卷筒组件

我使用了这个链接：

以下是我创建模态的代码：

    let modal = this.modalController.create(ModalWrapper, {
      type: MyAngular2SimpleComponent,
      init: function (component) {
        component.input1 = argument1;
        component.input2 = argument2;
      }
    });
    modal.onDidDismiss(data => {
      console.log(data);
    });
    modal.present();

我的角度分量：

@Component({
    template: `{{input1}} and {{input2}}`
})
export class MyAngular2SimpleComponent {
    @Input() input1;
    @Input() input2;
}

模态包装器：

@Component({
  template: `
    <div #target></div>
  `
})
export class ModalWrapper {

  @ViewChild('target', {read: ViewContainerRef}) target;
  @Input() type;

  componentRef:ComponentRef<any>;
  private isViewInitialized:boolean = false;

  constructor(private resolver:ComponentResolver, private params:NavParams) {
    this.type = params.get('type');
  }

  ngOnInit() {

  }

  updateComponent() {
    if(!this.isViewInitialized) {
      return;
    }
    if(this.componentRef) {
      this.componentRef.destroy();
    }
    this.resolver.resolveComponent(this.type).then((factory:ComponentFactory<any>) => {
      this.componentRef = this.target.createComponent(factory);

      // to access the created instance use
      // this.compRef.instance.someProperty = 'someValue';
      // this.compRef.instance.someOutput.subscribe(val => doSomething());
      this.params.get('init')(this.componentRef.instance);
    });
  }

  ngOnChanges() {
    this.updateComponent();
  }

  ngAfterViewInit() {
    this.isViewInitialized = true;
    this.updateComponent();
  }

  ngOnDestroy() {
    if(this.componentRef) {
      this.componentRef.destroy();
    }
  }
}

我调用在创建模态时传入参数的init方法。某种允许填充数据的双重分派

---

多亏了Günter Zöchbauer

一个可能的解决方案是创建一个通用包装器作为模态，它将实例化卷筒组件

我使用了这个链接：

以下是我创建模态的代码：

    let modal = this.modalController.create(ModalWrapper, {
      type: MyAngular2SimpleComponent,
      init: function (component) {
        component.input1 = argument1;
        component.input2 = argument2;
      }
    });
    modal.onDidDismiss(data => {
      console.log(data);
    });
    modal.present();

我的角度分量：

@Component({
    template: `{{input1}} and {{input2}}`
})
export class MyAngular2SimpleComponent {
    @Input() input1;
    @Input() input2;
}

模态包装器：

@Component({
  template: `
    <div #target></div>
  `
})
export class ModalWrapper {

  @ViewChild('target', {read: ViewContainerRef}) target;
  @Input() type;

  componentRef:ComponentRef<any>;
  private isViewInitialized:boolean = false;

  constructor(private resolver:ComponentResolver, private params:NavParams) {
    this.type = params.get('type');
  }

  ngOnInit() {

  }

  updateComponent() {
    if(!this.isViewInitialized) {
      return;
    }
    if(this.componentRef) {
      this.componentRef.destroy();
    }
    this.resolver.resolveComponent(this.type).then((factory:ComponentFactory<any>) => {
      this.componentRef = this.target.createComponent(factory);

      // to access the created instance use
      // this.compRef.instance.someProperty = 'someValue';
      // this.compRef.instance.someOutput.subscribe(val => doSomething());
      this.params.get('init')(this.componentRef.instance);
    });
  }

  ngOnChanges() {
    this.updateComponent();
  }

  ngAfterViewInit() {
    this.isViewInitialized = true;
    this.updateComponent();
  }

  ngOnDestroy() {
    if(this.componentRef) {
      this.componentRef.destroy();
    }
  }
}

我调用在创建模态时传入参数的init方法。某种允许填充数据的双重分派

多亏了甘特·佐克鲍尔