如何从其他组件为全局Header组件填充numero值？是否用@Input？

当然可以用@Input()来实现，这正是Angular中子父组件传递数据的标准方式，而且非常适合你当前的场景！下面是具体的实现步骤：

步骤1：在Header组件中定义@Input()属性 #

打开Header组件的.ts文件，导入Input装饰器，然后给numero属性加上@Input()标记，这样它就可以接收来自父组件的数据了：

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html'
})
export class HeaderComponent {
  // 使用@Input()标记这个属性允许从父组件接收值
  // 加!是告诉TypeScript这个属性会由父组件初始化，无需自行赋初始值
  @Input() numero!: string;
}

步骤2：在父组件模板中绑定数据 #

在使用<app-header>的父组件模板里，通过方括号[]进行属性绑定，把父组件的numero值传递给Header组件：

<!-- 将父组件的numero变量绑定到Header的numero输入属性 -->
<app-header [numero]="numero"></app-header>
<div>my component</div>

你的父组件.ts里已经定义了numero: string = "MY NUMERO";，这样设置后，Header组件模板中的{{numero}}就会正确显示这个值了。

可选方案：全局共享场景用Service #

如果你的numero是全局通用的（比如多个组件都需要修改它，或者路由切换后要保持这个值），可以用Angular Service来实现跨组件的数据共享：

1. 创建一个ProjectService：

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

@Injectable({ providedIn: 'root' })
export class ProjectService {
  // 用BehaviorSubject存储当前的numero，可设置初始默认值
  private numeroSubject = new BehaviorSubject<string>('');
  numero$ = this.numeroSubject.asObservable();

  // 提供方法来更新numero值
  updateNumero(newNumero: string) {
    this.numeroSubject.next(newNumero);
  }
}

2. 在Header组件中订阅这个值：

import { Component, OnInit } from '@angular/core';
import { ProjectService } from './project.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html'
})
export class HeaderComponent implements OnInit {
  numero!: string;

  constructor(private projectService: ProjectService) {}

  ngOnInit() {
    // 订阅Service中的numero变化，实时更新Header显示
    this.projectService.numero$.subscribe(numero => {
      this.numero = numero;
    });
  }
}

3. 在任意组件中更新这个值：

import { Component } from '@angular/core';
import { ProjectService } from './project.service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  constructor(private projectService: ProjectService) {}

  setProjectNumero() {
    this.projectService.updateNumero('MY NUMERO');
  }
}

这种方式适合需要跨多个组件共享或动态更新numero的场景，而如果只是单一父组件向Header传值，@Input()是最简单直接的方案。

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