Angular组件间变量传递：如何将AppComponent的isAuthenticated传给HeaderComponent？

当然可以实现把isAuthenticated变量传给HeaderComponent啦！在Angular里，父组件向子组件传递数据的标准方式是使用**@Input()装饰器**，你提到的bind写法并不是Angular的语法，我来一步步教你正确的实现方式：

步骤1：在子组件（HeaderComponent）中定义输入属性 #

首先需要在HeaderComponent.ts里导入Input装饰器，并声明一个输入属性来接收父组件传递的值：

// header.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html'
})
export class HeaderComponent {
  // 用@Input()标记这是一个从父组件接收的属性
  // ! 表示这个属性会被父组件赋值，避免类型检查报错
  @Input() isAuthenticated!: boolean;
}

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

接下来回到app.component.html，使用Angular的属性绑定语法（方括号[]），把父组件的isAuthenticated变量绑定到子组件的输入属性上：

<!-- app.component.html -->
<app-header [isAuthenticated]="isAuthenticated"></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

这样一来，AppComponent里的isAuthenticated值就会自动同步到HeaderComponent中了，你可以在HeaderComponent的模板或者逻辑里直接使用这个属性。

额外补充：给FooterComponent传值的方法 #

如果你也想给AppFooter传递这个变量，方法完全一样：

1. 在FooterComponent.ts里添加@Input() isAuthenticated!: boolean;
2. 在模板里修改为：<app-footer [isAuthenticated]="isAuthenticated"></app-footer>

为什么不能用bind语法？ #

Angular中没有你提到的<app-footer bind = isAuthenticated></app-footer>这种写法，属性绑定必须使用方括号包裹目标属性，同时子组件必须用@Input()声明接收的属性，这是Angular组件间通信的标准规范哦。

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