使用Material Design Lite和Angular2显示对话框

Question

我想显示一个包含angular2的对话框，如以下示例所示： https ://getmdl.io/components/index.html#dialog-section

因此，我在这里使用对话框polyfill： https : //github.com/GoogleChrome/dialog-polyfill

此polyfill需要在主体下方的对话框元素。 为此，我创建了一个包装器组件，该组件附加到dialog标签本身。 在应用程序中，该组件只能使用一次。

组件示例代码（请参见下面的plnkr中的全部）：

let factory: ComponentFactory<any> = this.componentFactoryResolver.resolveComponentFactory(type);
let injector = this.viewContainerRef.injector;
this.componentRef = this.viewContainerRef.createComponent(factory, 0, injector);

let dialogElement = this.el.nativeElement;

if (!dialogElement.showModal) {
  dialogPolyfill.registerDialog(dialogElement);
}

this.renderer.invokeElementMethod(dialogElement, 'showModal');

我正在使用带有可观察对象的服务，以让其他组件传入要在对话框中显示的组件。

正如您在插件中看到的那样，内容未显示在对话框中，而是在对话框标签的正下方。

我在这里缺少哪一部分？

我需要怎么做才能将参数传递给被调用的组件？ 例如，当我想要求用户删除实体时，我需要知道该实体的ID。

Plnkr： http ：//plnkr.co/edit/zZYOcgxcRINx23JhuxOk？p = preview

Answer 1

是的，您缺少此东西：

@ViewChild('target', {read: ViewContainerRef}) target;

this.componentRef = this.target.createComponent(factory, 0, injector);

而不是在主机标签（ viewContainerRef ）旁边注入组件

查看工作柱塞