Angular Пользовательские элементы & Angular 8 Материал: MatDialog и MatMenu не работают - PullRequest
Новая
       54

Angular Пользовательские элементы & Angular 8 Материал: MatDialog и MatMenu не работают

1 голос
/ 16 января 2020

Я использую angular пользовательских элементов для создания приложения, в котором MatDialog является частью пользовательского элемента. У меня есть MatMenu в хост-приложении. Проблема в том, что когда я открываю диалоговое окно с матом при загрузке страницы, а затем открываю меню с матами, диалоговое окно с математикой впоследствии не работает, в противном случае, если я сначала открою меню, а затем диалоговое окно с матом, меню не будет работать больше.

Вы можете найти стек стека по адресу: https://stackblitz.com/edit/angular-nr58ab-tbu38h

Я добавил основной. js код приложения MatDialog в индекс. html сам , Файл main. js был сгенерирован после сборки приложения с помощью ngx-build-plus в режиме prod с хэшированием вывода none и true для одного пакета.

Код приложения MatDialog выглядит следующим образом:

app.module.ts 

import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";

import { NgModule, Injector } from "@angular/core";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { createCustomElement } from "@angular/elements";

import { MatDialogModule, MatButtonModule } from "@angular/material";


@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatDialogModule,
    BrowserAnimationsModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [AppComponent]
})
export class AppModule {
  constructor(private injector: Injector) {
    const myCustomElement = createCustomElement(AppComponent, {
      injector: this.injector
    });
    customElements.define("app-test-data", myCustomElement);
  }
  ngDoBootstrap() {}
}

app.component.ts 

import { Component, Input, TemplateRef } from "@angular/core";
import { MatDialog } from "@angular/material";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  constructor(private dialog: MatDialog) {}
  openModal(temp: TemplateRef<any>) {
    this.dialog.open(temp, { width: "100px", height: "100px" });
  }
}

и app.component. html

<button mat-raised-button (click)="openModal(modal)">Open</button>

<ng-template #modal>
  <mat-dialog-content>
    Hello
  </mat-dialog-content>
</ng-template>

Это приложение, которое я создал и поместил в index. html приложения в stackblitz.

Я застрял с этим в течение некоторого времени, я попытался запустить dialog.open () внутри NgZone. run () тоже, но там тоже не повезло. Спасибо.

1 Ответ

0 голосов
/ 16 января 2020

изменить имя вашего пользовательского элемента 

customElements.define("app-custom-component", myCustomElement);

Рабочая демонстрация

В этой демонстрации она работает нормально.

Дайте мне знать, если Вы все еще сталкиваетесь с проблемой.

...