Angular如何在渲染组件之前检查模块是否加载

Question

我的 Angular 应用程序有一些模块，它们是延迟加载的。在模块 A 的一个组件中，我想在使用 *ngIf 渲染组件中的所有 html 标签之前检查该模块是否已加载。我怎样才能做到这一点？谢谢。

更新 1。

export class CustomerManModule extends AppModuleBase {
  constructor(injector: Injector) {
    super(injector, AppConsts.module.customerMan);

    var localeName = locale();
    this.appService.getLanguage(localeName, AppConsts.module.customerMan).subscribe((messages: any) => {
      let language = new Object();
      language[localeName] = messages;
      loadMessages(language);
    })
  }
}

在我调用loadMessages 函数后，所有的本地化字符串都会被加载，我只想在模块加载时加载这些字符串。之后，该模块的所有组件都需要检查这些字符串是否已加载以继续渲染。

Answer 1

当一个模块被加载时，它的构造函数被调用。

因此您可以创建自定义ModuleStateService，将其注入模块的构造函数并跟踪其状态。

例子：

@NgModule({
  imports: [CommonModule, SharedServicesModule],
  declarations: [LoginComponent]
})
export class AuthModule {
  constructor(moduleStateService: ModuleStateService) {
    console.log('AuthModule loaded');
    
    moduleStateService.loadedModule('AuthModule');
  }
}

更新 抱歉更新晚了。

您可以将 Route Resolver 与使用一些简单缓存机制（如 shareReplay(1)）的服务结合使用，以便只发出一次请求。

//Resolver

@Injectable({
  providedIn: 'root'
})
export class LocalizationResolver implements Resolve<Observable<any>> {
  constructor(private languageService: LanguageService) {}

  resolve(): Observable<any> {
    return this.languageService.loadMessages();
  }
}

// Service, with simplified caching

@Injectable({
  providedIn: 'root'
})
export class LanguageService {
  private cache = {};
  private url = 'https://api.github.com/users';

  constructor(private http: HttpClient) {}

  loadMessages(): Observable<any> {
    if (this.cache['messages']) {
      return this.cache['messages'];
    }
    this.cache['messages'] = this.http.get(this.url).pipe(shareReplay(1)); // todo error handling
    return this.cache['messages'];
  }
}

// Route configuration:

const ROUTES = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: ContainerComponent },
   ...
  {
    path: 'resolver',
    component: WithResolverComponent,
    resolve: { users: LocalizationResolver }
  }
];

Stackblitz