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

Question

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

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

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

组件示例代码（请参阅下面的 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');

我正在使用带有 observables 的服务来让其他组件传入组件以在对话框中显示。

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

我在这里缺少什么部分？

我需要做什么才能将参数传递给被调用的组件？例如当我想要求用户删除一个实体时，我需要知道该实体的 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）

查看工作Plunker