mdlカスタムダイアログを使用する場合、コンポーネントの入力パラメータをどのように渡すのですか？

Question

公式のangular-mdlウェブサイトからカスタムダイアログを作成するためのチュートリアルコードです。

let pDialog = this.dialogService.showCustomDialog({ 
    component: LoginDialogComponent, 
    providers: [{provide: TEST_VALUE, useValue: 'Just an example'}], 
    isModal: true, 
    styles: {'width': '350px'}, 
    clickOutsideToClose: true 
}); 

ここで、LoginDialogComponentにいくつかの@Input（）パラメータを追加すると、次のようになります。 @Input() requireCaptcha: boolean;

どのようにパラメータを渡すことができますか？

Answer 1

あなたのケースでは、requireCaptcha値を渡すことができる要素が必要になるため、@ Inputを使用することはできません。

プロバイダArrayを使用してダイアログコンポーネントに値を渡すことを意図しています。まず、すべてのInjectionTokenを作成します。

export const REQUIERE_CAPTCHA = new InjectionToken<boolean>('requireCaptcha'); 

その後、あなたのshowCustomDialog方法の使用中：

let pDialog = this.dialogService.showCustomDialog({ 
    component: LoginDialogComponent, 
    providers: [{provide: REQUIERE_CAPTCHA, useValue: true}], 
    isModal: true, 
    styles: {'width': '350px'}, 
    clickOutsideToClose: true 
}); 

今、あなたはあなたのダイアログコンポーネントでREQUIERE_CAPTCHAにアクセスすることができます。

constructor(
    private dialog: MdlDialogReference, 
    @Inject(REQUIERE_CAPTCHA) requireCaptcha: boolean) { 

console.log(requireCaptcha); 

} 

を