使用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 ）旁邊注入組件

查看工作柱塞