Angular：如何从类导出CookieService值到其他类并在网页展示

问题根因 #

• 你在AppComponent中声明的readonly random?: AppComponent完全错误，该属性指向的是AppComponent自身实例，而非你编写的CookieService服务，自然无法调用CookieService中定义的setUserName方法
• getToken获取用户信息是异步请求，Cookie写入存在延迟，页面首次渲染时可能还未获取到用户信息，直接调用方法会抛出空值错误导致渲染失效

修复步骤 #

1. 在AppComponent中正确注入CookieService #

首先在AppComponent的构造函数中注入你实现的CookieService，同时声明变量存储用户名，示例代码：

import { Component, OnInit } from '@angular/core';
// 替换为你实际的CookieService导入路径
import { CookieService } from './xxx/cookie.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  // 存储用户名，用于模板渲染
  userName: string = '';

  // 依赖注入CookieService
  constructor(private cookieService: CookieService) {}

  ngOnInit(): void {
    // 组件初始化时读取Cookie中的用户名
    this.userName = this.cookieService.setUserName() || '';
  }
}

2. 修正模板渲染逻辑 #

添加空值保护，避免空值报错，直接读取组件中存储的userName变量即可：

<div class="row">
      <div class="col-sm margin-top-3">
        Order Permissions for {{userName ? userName : '未登录用户'}}
        <br>
        <button
          style="width: 10%"
          id="orderSinglePermission"
          class="button button--primary margin-top-3"
        > Order
        </button>
      </div>

可选优化：异步登录完成后自动更新用户名 #

如果是在AppComponent加载完成后才触发的登录逻辑，可以在CookieService的login方法中新增事件通知，组件订阅事件后自动更新用户名，示例：

// CookieService中新增逻辑
import { Subject } from 'rxjs';
public loginSuccess$ = new Subject<void>();

public login(code: string, state: string) {
    const paramsString = `?code=${code}&state=${state}`;
    this.oAuthService.getToken(paramsString).subscribe((response) => {
      const dateNow = new Date();
      dateNow.setSeconds(dateNow.getSeconds() + 720);
      this.cookieService.set("access_token", response.access_token, {expires: dateNow});
      this.cookieService.set("user_info", response.user_info.user_name, {expires: dateNow});
      this.cookieService.set("user_email", response.user_info.email, {expires: dateNow});
      this.cookieService.set("user_id", response.user_info.user_id, {expires: dateNow});
      // 发送登录完成通知
      this.loginSuccess$.next();
    });
  }

AppComponent中订阅该事件：

ngOnInit(): void {
  this.userName = this.cookieService.setUserName() || '';
  // 订阅登录完成事件，登录后重新读取用户名
  this.cookieService.loginSuccess$.subscribe(() => {
    this.userName = this.cookieService.setUserName() || '';
  })
}

内容的提问来源于stack exchange，提问作者Pfluka