angular - 翻译在错误组件 angular2/6 中不起作用

Question

在加载应用程序时，我正在调用将加载主数据的服务。如果由于任何网络问题未加载主数据。然后我通过将错误存储在本地存储中并检索错误组件中的错误来导航到错误组件。在 Error.component.html 我使用 "| translate" 。这是行不通的。所有其他 html 文件都在使用翻译管道。

应用模块

export function createTranslateLoader(http: Http) {
    return new TranslateStaticLoader(http, './assets/i18n', '.json');
}


@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        // :CORE MODULE: //
        BrowserModule,
        BrowserAnimationsModule,
        HttpClientModule,
        TranslateModule.forRoot(
            {
                provide: TranslateLoader,
                useFactory: (createTranslateLoader),
                deps: [Http]
            }),
        FormsModule,
        CommonModule, //<====added

        //:3RD PARTY MODULE://
        BootstrapModalModule,

        //:APPLICTION MODULES: //
        AppLoadModule, //Startupdata before APP loaded
        AppRoutingModule,
        FooterModule,
        ErrorModule,
        AccessDeniedModule,
        NotFoundModule,
        RouterModule.forRoot([]),
        ToasterModule.forChild(),
    ],
    providers: [
        LoaderService,
        ToasterService,
        StartupService,
        ResponseStatusesService,
        LocalStorageService,
        ApplicationSettingsService,
        LabSelectionService,
        AccountService,
        AuthService,
        AlertService,
        AuthGuard,
        RolesGuard,
        FeaturebasedGuard,
        ErrorLogService,
        {
            provide: ErrorHandler,
            useClass: GlobalErrorsHandler
        },
        {
            provide: HTTP_INTERCEPTORS,
            useClass: AppHttpInterceptor,
            multi: true
        },
        {
            provide: LocationStrategy,
            useClass: HashLocationStrategy
        },
    ],
    exports: [],
    bootstrap: [AppComponent]
})

export class AppModule { }

应用加载模块

export function load(appLoadService: AppLoadService) {
  return () => appLoadService.load();
}


@NgModule({
  imports: [HttpClientModule],
  providers: [
    AppLoadService,
    { provide: APP_INITIALIZER, useFactory: load, deps: [AppLoadService], multi: true }

  ]
})
export class AppLoadModule { }

应用加载服务

 load(): Promise<any> {
        return new Promise(resolve => {
            const promise = this.httpClient.get('assets/settings/config.json')
                .subscribe(
                    res_config => {                       
                        /*=========== AUTH  CALL API - START ===========*/
                        this.httpClient.get('/api/auth')
                            .subscribe(
                                res_auth_context => {
                                    this.storeUserContext(res);
                                    console.log('@auth context loaded step3');

                                    /*=========== LOAD master data ===========*/
                                    this.httpClient.get('/xyz/masterData')
                                        .subscribe(
                                            res => {
                                               
                                                console.log(" master data Loaded");
                                                resolve();
                                            },
                                            err => {
                                                debugger;
                                                this.localStorage.store("error", err);
                                                let router = this.injector.get(Router);
                                                router.navigate(['error']);
                                                resolve();
                                            }
                                        );
                                    /*=========== LOAD Mastre data ===========*/
                                },
                                res_auth_context_error => {
                                    console.log("Auth Call Failed");
                                }
                            );
                        /*=========== AUTH CALL API - END ===========*/

                    },
                    res_config_Error => {
                        console.log("config file NOT  loaded", res_config_Error);
                    }
                );
        });
    }

应用路由模块

const routes: Routes = [
    {
        path: '',
        children: [
            { path: '', loadChildren: './home/home.module#HomeModule' },
            { path: 'error', loadChildren: './core/error/error.module#ErrorModule' },
            { path: 'accessDenied', loadChildren: './accessDenied/access-denied.module#AccessDeniedModule' },
            { path: 'notfound', loadChildren: './notFound/not-found.module#NotFoundModule' },
            { path: '**', redirectTo: '/notfound' }
        ]
    }

];

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

错误路由模块

const routes: Routes = [
    {
        path: '', component: ErrorComponent
    }
];

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

error.component.html

<p class="m-y text-muted h4">
     <a (click)="logout()" class="text-danger">{{'logout'|translate}} and Re-login</a>
 </p>
<textarea [(ngModel)]='errorMessage' [disabled]="true" rows="10" cols="120"></textarea>

错误模块

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        ErrorRoutingModule,
        TranslateModule
    ],
    declarations: [ErrorComponent]
})
export class ErrorModule { }

标签： angularangular2-routinglazy-loadingangular-translateng2-translate