在Angular 9中使用Angular Universal进行服务器渲染时，如果要在模板中使用ngIf指令进行条件检查，可能会遇到延迟的问题。这是因为服务器端渲染时，模板在服务器上运行，而不是在浏览器上运行，因此无法立即获取到与模板相关的任何异步数据。这可能导致ngIf条件检查出现延迟，直到异步数据返回。

为了解决这个问题，可以在服务器端和客户端之间共享异步数据。以下是一种解决方法：

1. 在共享模块（例如app.module.ts）中导入BrowserTransferStateModule和TransferState模块：

import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
import { TransferState } from '@angular/platform-browser';

2. 在NgModule的imports数组中添加BrowserTransferStateModule：

@NgModule({
  imports: [
    BrowserModule.withServerTransition({ appId: 'your-app-id' }),
    BrowserTransferStateModule
  ],
  ...
})
export class AppModule { }

3. 在组件中使用TransferState服务来获取和设置异步数据。例如，假设你有一个名为dataService的服务，该服务从服务器获取异步数据：

import { TransferState } from '@angular/platform-browser';
import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(
    private transferState: TransferState,
    @Inject(PLATFORM_ID) private platformId: Object
  ) { }

  getData(): Promise {
    if (isPlatformServer(this.platformId)) {
      // 从服务器获取数据
      return this.fetchDataFromServer();
    } else {
      // 检查是否已经有数据在TransferState中
      const data = this.transferState.get('data', null);
      if (data) {
        // 从TransferState获取数据
        this.transferState.remove('data');
        return Promise.resolve(data);
      } else {
        // 从服务器获取数据
        return this.fetchDataFromServer();
      }
    }
  }

  private fetchDataFromServer(): Promise {
    // 模拟异步请求
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const data = { name: 'John Doe' };
        if (isPlatformBrowser(this.platformId)) {
          // 在浏览器端存储数据到TransferState
          this.transferState.set('data', data);
        }
        resolve(data);
      }, 2000);
    });
  }
}

4. 在组件中使用ngIf指令进行条件检查，并在订阅异步数据之前添加一个isLoading标志。这样可以避免在异步数据返回之前显示错误内容。

  Loading...


  {{ data.name }}

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-example',
  template: `
    

      Loading...
    
    

      {{ data.name }}
    
  `
})
export class ExampleComponent implements OnInit {
  isLoading = true;
  data: any;

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.getData().then(data => {
      this.data = data;
      this.isLoading = false;
    });
  }
}

这样，无论是在服务器端还是在浏览器端，都可以正确地处理异步数据，并且ngIf指令的检查不会出现延迟。