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

Question

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

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

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

组件示例代码（详见下文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');

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

正如您在 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

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

Show Dialog with Material Design Lite and Angular2

material-design-lite

angular