代码之家  ›  专栏  ›  技术社区  ›  SudoGrace

通知不会在延迟加载的模块中消失。(“ng2 toasty”或“angular2 notifications”等库)

  •  0
  • SudoGrace  · 技术社区  · 7 年前

    我试图在我的应用程序(AngularCLI-4.4.6)的延迟加载模块中使用“ng2 toasty”或“angular2 notifications”之类的库。所有此类库的文档都表明我需要导入BrowserAnimationModule。但是当我将这个模块(BrowserAnimationModule)导入应用程序的根模块时,我遇到了一个问题——通知并没有消失。

    当我寻找这个问题的解决方案时,我发现一些开发人员拥有 same problem . 但他们只是通过导入BrowserAnimationModule来解决这个问题。我无法直接在我的businessModule中导入BrowserAnimationModule,因为出现错误:“BrowserModule已经加载。”

    如果能在这件事上得到任何帮助,我将不胜感激。

    应用模块:

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

    应用程序。路由。输电系统

    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 { }
    

    更新

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

    商业路由器。输电系统

        imports: [
            RouterModule.forChild([
                {
                  path: '',
                  component: BusinessComponent,
                  canActivate: [ BusinessAuthGuardService ],               
                  children: [
                    {
                      path: '',
                      redirectTo: 'bids',
                      pathMatch: 'full'
                    },
                    {
                      path: 'bids',
                      component: BidsComponent
                    }
                  ]
                }
            ])
        ],
        exports: [
            RouterModule
        ]
    })
    export class BusinessRouting {}
    
    1 回复  |  直到 7 年前
        1
  •  0
  •   SudoGrace    7 年前

    今天,我尝试在plunkr中重新创建我的示例,我发现该项目在那里工作正常。问题出在我的实际应用中。我想在其中使用通知的组件需要来自数据库的数据。在我的html模板中,我使用了数据(变量),这些数据在渲染时(瞬间)是未定义的。它生成了一个错误,显然阻止了足够的通知服务。

    通过在组件内部使用*ngIf解决了这个问题,该组件具有未定义的数据*仅当数据集已满时,ngIf才帮助渲染组件。