延迟加载模块中的通知不会消失。（像 "ng2-toasty" 或 "angular2-notifications" 这样的库）

Question

我正在尝试在我的应用程序 (Angular CLI-4.4.6) 的延迟加载模块中使用 "ng2-toasty" 或 "angular2-notifications" 等库。所有此类库的文档都表明我需要导入 BrowserAnimationModule。但是当我将这个模块 (BrowserAnimationModule) 导入我的应用程序的根模块时，我遇到了一个问题 - 通知不会消失。

当我在寻找这个问题的解决方案时，我发现一些开发人员有 same problem 。但他们只是通过导入 BrowserAnimationModule 来解决它。我无法直接在我的 businessModule 中导入 BrowserAnimationModule，因为出现错误："BrowserModule has already been loaded."

我以为我的问题是 BrowserAnimationModule 在延迟加载的模块中不起作用，我在其中使用了通知。但是我也找不到这个问题的解决方案。

如有任何帮助，我将不胜感激。

应用模块：

@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    JsonpModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    CoreModule,    
    NgbModule.forRoot(),   
    appRouting
  ],
  declarations: [
    AppComponent
  ],
  providers: [
    NotificationsService    
  ],
 bootstrap: [AppComponent]
})

app.routing.ts

import { NgModule, ModuleWithProviders } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

export const appRoutes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },    
    { path: 'home', loadChildren: './home/home.module#HomeModule' },
    { path: 'business', loadChildren: './business/business.module#BusinessModule' }    
];
export const appRouting: ModuleWithProviders = RouterModule.forRoot(appRoutes);

业务模块

@NgModule({
  imports: [
    CommonModule,
    FormsModule, 
    ReactiveFormsModule,
    CoreModule,
    BusinessRouting
  ],
  declarations: [ 
    BusinessComponent, 
    HeaderComponent, 
    SidebarComponent, 
    AuthCompanyComponent, 
    LogoutCompanyComponent, 
    LoginCompanyComponent, 
    SignupCompanyComponent, 
    ForgotPasswordCompanyComponent, 
    BidsComponent, 
    ChangePasswordComponent
   ],
  providers: [
    BusinessAuthGuardService,
    DataService,
    BidService,
    NotificationsService
  ]
})
export class BusinessModule { }

更新从 27/10/17

当我从延迟加载模块 (BusinessModule) 的基本组件 (BusinessComponent) 调用它们时，通知工作正常。但是在我的延迟加载模块中，我有路由器出口，它加载了属于 BusinessModule 的其他组件。其中之一 - BidsComponent。当我尝试从此组件调用 Notification 时 - 它不起作用...

business.router.ts

@NgModule({

    imports: [
        RouterModule.forChild([
            {
              path: '',
              component: BusinessComponent,
              canActivate: [ BusinessAuthGuardService ],               
              children: [
                {
                  path: '',
                  redirectTo: 'bids',
                  pathMatch: 'full'
                },
                {
                  path: 'bids',
                  component: BidsComponent
                }
              ]
            }
        ])
    ],
    exports: [
        RouterModule
    ]
})
export class BusinessRouting {}

Answer 1

今天我尝试在 plunkr 中重新创建我的示例，我看到该项目在那里正常运行。问题出在我的实际应用程序中。我想在其中使用通知的组件需要来自数据库的数据。在我的 html-template 中，我使用了数据（变量），它在渲染时（瞬间）是未定义的。它产生了一个错误，显然阻止了足够的通知服务。

问题已通过在具有未定义数据的组件内部使用 *ngIf 解决。 *ngIf 仅在数据集已满时才帮助渲染组件。我希望这个解决方案对某人有用。

延迟加载模块中的通知不会消失。（像 "ng2-toasty" 或 "angular2-notifications" 这样的库）

Notifications do not disappear inside lazy loaded module. (libraries like "ng2-toasty" or "angular2-notifications")

lazy-loading

angular-cli

angular

延迟加载模块中的通知不会消失。 （像 "ng2-toasty" 或 "angular2-notifications" 这样的库）

Notifications do not disappear inside lazy loaded module. (libraries like "ng2-toasty" or "angular2-notifications")

lazy-loading

angular-cli

angular

延迟加载模块中的通知不会消失。（像 "ng2-toasty" 或 "angular2-notifications" 这样的库）