Как передать входные параметры для компонента при использовании настраиваемого диалога 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
});

Теперь, если я добавлю некоторые параметры @Input() в LoginDialogComponent, например @Input() requireCaptcha: boolean;

Как я могу передать параметры там?

Answer 1

Вы не можете использовать @Input в вашем случае, потому что для этого потребуется элемент, в котором вы можете передать значение requireCaptcha.

Намерение состоит в том, чтобы использовать массив поставщиков для передачи значений вашему диалоговому компоненту. Прежде всего создайте 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);

}