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');

我正在使用带有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

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

1 个答案: