Angular Universal 用于动态内容

# Angular Universal: 利用动态内容提升性能

typescript
// user.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class UserService {
  constructor(private http: HttpClient) {}
  getUserInfo(): Observable {
    // 在这里调用后端 API 获取用户信息
    // 这里仅为示例，实际情况中需替换为实际的 API 调用
    return this.http.get('/api/user');
  }
}

typescript
// user.component.ts
import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';
@Component({
  selector: 'app-user',
  template: `
    
      {{ userName }}
      
Email: {{ userEmail }}
    
  `,
})
export class UserComponent implements OnInit {
  userName: string = '';
  userEmail: string = '';
  constructor(private userService: UserService) {}
  ngOnInit() {
    // 在 Angular Universal 中，我们在服务器端获取用户信息
    this.userService.getUserInfo().subscribe((userInfo) => {
      this.userName = userInfo.name;
      this.userEmail = userInfo.email;
    });
  }
}