Angular 12 从AppComponent向路由组件传值不生效如何解决

问题核心原因 #

你现有代码存在4个关键错误导致值无法更新：

1. HomeSelector 未注入AppService，直接调用this.appService会抛出未定义错误
2. AppService 没有定义可观察对象同步状态，AppComponent 更新的会话数据仅存在自身属性和localStorage中，没有同步到服务层
3. HomeSelector 未接收任何@Input属性，ngOnChanges生命周期钩子永远不会触发，写在内部的赋值逻辑不会执行
4. HomeComponent 启用了OnPush变更检测策略，异步更新的属性如果没有通过async管道传递或手动触发变更检测，视图不会响应更新

修复步骤 #

1. 改造AppService，添加状态管理逻辑

在AppService中使用BehaviorSubject存储会话状态，对外暴露可观察对象和更新方法：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class AppService {
  // 初始化默认值从localStorage读取
  private nomeSessaoSub = new BehaviorSubject<string | null>(localStorage.getItem('sn'));
  private ultimaAtualizacaoSub = new BehaviorSubject<string | null>(localStorage.getItem('ultAtu'));

  // 对外暴露只读的可观察对象
  public nomeSessao$ = this.nomeSessaoSub.asObservable();
  public ultimaAtualizacao$ = this.ultimaAtualizacaoSub.asObservable();

  // 提供状态更新方法
  updateSessao(nome: string | null, ultimaAtu: string | null) {
    this.nomeSessaoSub.next(nome);
    this.ultimaAtualizacaoSub.next(ultimaAtu);
  }

  // 原有consultarAtributosSessao方法保留即可
}

2. 修改AppComponent，更新状态同步到服务

在AppComponent的接口回调中调用服务的更新方法，同时修复ngOnDestroy中未执行的localStorage.clear方法：

// AppComponent的ngOnInit内的subscribe回调修改
this.appService.consultarAtributosSessao().subscribe((res) => {
  console.log(res);
  let response = new SsoAttributesResponse(res);
  localStorage.setItem('sn', response.getAttributes('sn')[0]);
  localStorage.setItem('ultAtu', response.getAttributes('ultAtu')[0]);
  this.nomeSessao = localStorage.getItem('sn');
  this.ultimaAtualizacaoSessao = localStorage.getItem('ultAtu');
  // 新增：同步状态到服务
  this.appService.updateSessao(this.nomeSessao, this.ultimaAtualizacaoSessao);
});

// ngOnDestroy修改
ngOnDestroy() {
  this.nomeSessao = null;
  this.ultimaAtualizacaoSessao = null;
  // 补全方法调用括号
  localStorage.clear();
  // 同步清空服务状态
  this.appService.updateSessao(null, null);
}

3. 重写HomeSelector，订阅状态更新

删除无用的ngOnChanges逻辑，注入AppService后直接在模板使用async管道传递值（无需手动订阅、自动适配OnPush变更检测）：

import { Component } from '@angular/core';
import { AppService } from '../app.service'; // 请调整为你项目中AppService的实际路径

@Component({
  selector: 'app-home-selector',
  template: `
    <app-home 
      [nome]="appService.nomeSessao$ | async" 
      [ultimaAtualizacao]="appService.ultimaAtualizacao$ | async"
    ></app-home>
  `
})
export class HomeSelector {
  constructor(public appService: AppService) {}
}

可选优化 #

如果你需要在HomeComponent中做额外的逻辑处理，可以注入ChangeDetectorRef，在ngOnChanges中手动标记变更：

import { ChangeDetectorRef } from '@angular/core';

// HomeComponent构造函数修改
constructor(private cdr: ChangeDetectorRef) {
  this.nome = null;
  this.ultimaAtualizacao = null;
}

ngOnChanges(changes: SimpleChanges) {
  console.log(changes);
  this.cdr.markForCheck();
}

内容的提问来源于stack exchange，提问作者Luiz Sergio Pinheiro Bernardo