有没有一种方法可以对所有消息仅使用一个 p-toast？

Question

我正在使用 primeng p-toast 来显示消息。

我将 p-toast html 放在 app.component.html 中

<div class="main-container">
  <router-outlet></router-outlet>
</div>
<p-toast position="top-right" key="main"></p-toast>

并在sharedModule中导入ToastModule和MessageService，以便任何组件都可以使用它。

尝试在许多子组件上使用它显示一条消息，但它没有显示

this.messageService.add({
          key: "main",
          severity: "info",
          detail: "Ready to scan",
        });

我仍然需要在孩子的 html 中添加 p-toast html 才能使其正常工作。

子组件通过 app-routing.module 加载

const routes: Routes = [
  { path: "", component: HomeComponent },
  {
    path: "catalogs",
    loadChildren: () =>
      import("./catalog/catalog.module").then((m) => m.CatalogModule)
  }];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

有没有一种方法可以只声明一个，并且子组件调用 messageService.add 可以在该 p-toast 上显示消息？

Answer 1

我已经在@yurzui 的帮助下解决了这个问题

以前，ToastModule 和 MessageService 是在 SharedModule 中导入的，这样我就不必重复将内容导入到我创建的其他模块中。

我刚刚将 ToastModule 和 MessageService 导入从 SharedModule 移至 AppModule，因为<p-toast>仅在 app.component.html 中