Question

一切都在标题中。

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

由于

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

Answer 1

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

我使用了以下链接：Is it possible to manually instantiate component in angular 2

这是我创建模态的代码：

    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();
    }
  }
}

包装器中的主要内容是：

this.params.get('init')(this.componentRef.instance);

我在创建模态时调用我在参数中传递的init方法。某种双重调度，允许填充数据。

感谢GünterZöchbauer

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

1 个答案: