使用 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

你不能在你的情况下使用@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);

}

使用 mdl 自定义对话框时如何为组件传递输入参数？

How do I pass input parameters for a component when using mdl custom dialog?

angular-mdl

angular