Angular 16中通过@Input实现父子组件字符串传递失败问题排查

问题核心：点击page-code的按钮后，父组件虽设置了someErrorString = 'Hi!'并导航到error页面，但page-error组件无法显示该值，原因是路由导航导致父组件实例重建，原有的someErrorString值被清空。

以下是具体解决思路和代码修改：

方案1：通过路由参数传递数据 #

导航时将someErrorString作为路由参数携带，父组件初始化时读取参数并赋值，确保页面刷新后数据不丢失。

父组件逻辑修改 #

import { ActivatedRoute } from '@angular/router';

someErrorString: string;

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  // 读取路由参数
  this.route.queryParamMap.subscribe(params => {
    this.someErrorString = params.get('errorMsg') || '';
  });
}

onErrorReceived(someErrorString: string) {
  const nextUrl = someErrorString ? 'error' : 'code';
  // 导航时携带参数
  this.router.navigate(['prefix', 'page', nextUrl], {
    queryParams: { errorMsg: someErrorString }
  });
}

父组件UI无需修改 #

仍保持原有的[someErrorString]="someErrorString"绑定即可。

方案2：用共享服务存储数据 #

创建一个全局服务来保存someErrorString，组件间通过服务共享数据，不受路由导航影响。

1. 创建共享服务 #

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

@Injectable({ providedIn: 'root' })
export class ErrorDataService {
  private errorStringSubject = new BehaviorSubject<string>('');
  errorString$ = this.errorStringSubject.asObservable();

  setErrorString(value: string) {
    this.errorStringSubject.next(value);
  }

  getErrorString() {
    return this.errorStringSubject.value;
  }
}

2. 父组件逻辑修改 #

import { ErrorDataService } from './path-to-error-data.service';

constructor(private errorDataService: ErrorDataService) {}

onErrorReceived(someErrorString: string) {
  this.errorDataService.setErrorString(someErrorString);
  const nextUrl = someErrorString ? 'error' : 'code';
  this.router.navigate(['prefix', 'page', nextUrl]);
}

3. page-error组件逻辑修改 #

import { ErrorDataService } from './path-to-error-data.service';

constructor(private errorDataService: ErrorDataService) {}

ngOnInit() {
  this.errorDataService.errorString$.subscribe(value => {
    this.someErrorString = value;
  });
}

方案3：通过路由state传递数据 #

Angular支持导航时通过state传递数据，适合临时数据传递（页面刷新后state会丢失）。

父组件逻辑修改 #

onErrorReceived(someErrorString: string) {
  const nextUrl = someErrorString ? 'error' : 'code';
  this.router.navigate(['prefix', 'page', nextUrl], {
    state: { someErrorString: someErrorString }
  });
}

父组件初始化读取state #

import { Router } from '@angular/router';

constructor(private router: Router) {}

ngOnInit() {
  // 读取路由state
  const navigation = this.router.getCurrentNavigation();
  if (navigation?.extras.state) {
    this.someErrorString = navigation.extras.state['someErrorString'];
  }
}

额外检查点 #

1. 确认page-error组件的@Input()是否正确导入装饰器：

import { Input, Output, EventEmitter } from '@angular/core';

2. 父组件的currentPage建议通过订阅路由变化自动更新，避免手动维护状态不一致：

ngOnInit() {
  this.router.url.subscribe(url => {
    this.currentPage = url.includes('error') ? 'error' : 'code';
  });
}

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