イオン2 - 単純な角度2成分からモーダルを作成する（イオン性NavParamsおよびNavControllerとのカップリングを作成しない）

Question

すべてがタイトルに含まれています。

通常の角度2のコンポーネントからモーダルを作成したいと考えています。 問題は、引数を取得するNavParamsと、モーダルを閉じるNavControllerを注入する必要があることです。

おかげ

編集：私は答えを掲載しているが、おそらくもっと良いものがあります。再度、感謝します。

Answer 1

可能な解決策の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に感謝