Angular 5组件间属性复用：如何共享AppComponent的title属性

嘿，我刚入门Angular的时候也碰到过这种组件间属性复用的问题，尤其是根组件（AppComponent）和子组件/路由组件（比如LoginComponent）之间的数据共享，给你几个在Angular 5里完全可行的方案，你可以根据自己的场景来选：

方案一：@Input() 输入属性（适合父子组件嵌套场景） #

如果你的LoginComponent是直接嵌套在AppComponent的模板里（不是通过路由加载），那用@Input()是最直接的方式：

1. 在LoginComponent中定义输入属性
   打开login.component.ts，导入Input并定义接收title的属性：

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

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent {
  // 定义输入属性，接收父组件传递的title
  @Input() title: string;
}

2. 在AppComponent模板中传递属性
   在app.component.html里，使用<app-login>标签时通过方括号绑定title：

<!-- app.component.html -->
<app-login [title]="title"></app-login>

这样在login.component.html里就能直接用{{ title }}来显示AppComponent里的title值了。

注意：如果你的LoginComponent是通过路由配置加载的（比如访问/login时显示），这种嵌套传递的方式就不适用，得用下面的服务方案。

方案二：共享服务（适合任何组件间共享，包括路由组件） #

创建一个专门的共享服务来存储和管理title属性，所有需要用到这个属性的组件都注入该服务即可，这是Angular中跨组件共享数据的常用方式：

1. 创建共享服务
   新建一个app-title.service.ts文件，内容如下：

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

@Injectable({
  // Angular 5+支持这种方式，自动在根模块提供服务
  providedIn: 'root'
})
export class AppTitleService {
  // 这里可以直接初始化title，或者和AppComponent同步
  title = '你的应用标题';
}

如果你习惯在模块里注册服务，也可以把providedIn: 'root'去掉，然后在AppModule的providers数组里添加AppTitleService。

2. 在AppComponent中注入并使用服务
   修改app.component.ts，注入服务并关联title：

import { Component } from '@angular/core';
import { AppTitleService } from './app-title.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  // 通过getter获取服务里的title，保持同步
  get title(): string {
    return this.titleService.title;
  }

  constructor(private titleService: AppTitleService) {}
}

3. 在LoginComponent中注入并使用服务
   修改login.component.ts，同样注入服务获取title：

import { Component } from '@angular/core';
import { AppTitleService } from '../app-title.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent {
  get title(): string {
    return this.titleService.title;
  }

  constructor(private titleService: AppTitleService) {}
}

现在在login.component.html里直接用{{ title }}就能拿到和AppComponent一样的title值了。

方案三：RxJS BehaviorSubject（适合需要动态更新的场景） #

如果你的title会动态变化（比如用户修改后需要所有组件自动更新），那用RxJS的BehaviorSubject来实现响应式共享更合适：

1. 修改共享服务为响应式
   更新app-title.service.ts：

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

@Injectable({
  providedIn: 'root'
})
export class AppTitleService {
  // BehaviorSubject会保存当前值，新订阅的组件能立即拿到最新值
  private titleSubject = new BehaviorSubject<string>('初始应用标题');
  // 暴露可观察对象，组件只能订阅不能修改
  title$ = this.titleSubject.asObservable();

  // 提供修改title的方法
  setTitle(newTitle: string) {
    this.titleSubject.next(newTitle);
  }
}

2. 在AppComponent中使用响应式title
   修改app.component.ts：

import { Component } from '@angular/core';
import { AppTitleService } from './app-title.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  // 直接订阅服务里的可观察对象
  title$ = this.titleService.title$;

  constructor(private titleService: AppTitleService) {
    // 可以在这里设置初始title
    this.titleService.setTitle('我的Angular 5应用');
  }
}

在app.component.html里用async管道订阅：

<h1>{{ title$ | async }}</h1>

3. 在LoginComponent中使用响应式title
   修改login.component.ts：

import { Component } from '@angular/core';
import { AppTitleService } from '../app-title.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent {
  title$ = this.titleService.title$;

  constructor(private titleService: AppTitleService) {}
}

在login.component.html里同样用async管道：

<p>当前应用标题：{{ title$ | async }}</p>

这样只要调用titleService.setTitle()修改title，所有组件的title都会自动更新。

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