Angular.js 5.11中兄弟组件间的数据传递方案咨询

嘿，这个问题我太熟悉了！在Angular里实现兄弟组件（child1和child2）的状态共享，有几种很实用的方案，咱们一个个拆解清楚——包括你提到的双向绑定方案，完全可行哦！

方案1：父组件作为中间层（基础直接方案） #

这是Angular里最基础的组件通信方式，适合简单的兄弟组件场景，核心思路是让父组件当“桥梁”：

• child1把active变量的变化通过@Output事件通知父组件
• 父组件接收事件后更新自己的变量，再通过@Input把变量传给child2

代码示例： #

child1.component.ts

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

@Component({
  selector: 'app-child1',
  templateUrl: './child1.component.html'
})
export class Child1Component {
  vm = { active: false };

  @Output() activeChange = new EventEmitter<boolean>();

  // 当vm.active变化时调用（比如按钮点击或其他逻辑）
  onActiveToggle() {
    this.vm.active = !this.vm.active;
    this.activeChange.emit(this.vm.active);
  }
}

parent.component.ts

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  parentActive = false;

  handleActiveChange(value: boolean) {
    this.parentActive = value;
  }
}

parent.component.html

<app-child1 (activeChange)="handleActiveChange($event)"></app-child1>
<app-child2 [active]="parentActive"></app-child2>

child2.component.ts

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

@Component({
  selector: 'app-child2',
  templateUrl: './child2.component.html'
})
export class Child2Component {
  @Input() active: boolean;
}

child2.component.html

<div *ngIf="active">只有当child1的active为true时，我才显示！</div>

方案2：双向绑定（你考虑的方案，完全可行） #

双向绑定本质是@Input+@Output的语法糖，写起来更简洁，实现逻辑和方案1一致：

代码示例： #

child1.component.ts

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

@Component({
  selector: 'app-child1',
  templateUrl: './child1.component.html'
})
export class Child1Component {
  @Input() active: boolean;
  @Output() activeChange = new EventEmitter<boolean>();

  // 切换状态时触发双向绑定更新
  toggleActive() {
    this.active = !this.active;
    this.activeChange.emit(this.active);
  }
}

parent.component.html

<!-- 使用[(active)]语法实现双向绑定 -->
<app-child1 [(active)]="parentActive"></app-child1>
<app-child2 [active]="parentActive"></app-child2>

parent.component.ts和child2的代码和方案1完全一致，这样child2就能直接用active变量做*ngIf判断了。

方案3：共享服务（适合复杂场景） #

如果你的应用比较复杂，或者有多个组件需要共享这个active状态，用共享服务是更优雅的选择。我们可以用BehaviorSubject保存状态，它能保存当前值并给新订阅者发送最新值：

代码示例： #

shared-state.service.ts

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

@Injectable({
  providedIn: 'root' // Angular 5+支持的单例服务提供方式
})
export class SharedStateService {
  private activeSubject = new BehaviorSubject<boolean>(false);
  active$ = this.activeSubject.asObservable();

  setActive(value: boolean) {
    this.activeSubject.next(value);
  }
}

child1.component.ts

import { Component } from '@angular/core';
import { SharedStateService } from './shared-state.service';

@Component({
  selector: 'app-child1',
  templateUrl: './child1.component.html'
})
export class Child1Component {
  vm = { active: false };

  constructor(private sharedState: SharedStateService) {}

  toggleActive() {
    this.vm.active = !this.vm.active;
    this.sharedState.setActive(this.vm.active);
  }
}

child2.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { SharedStateService } from './shared-state.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-child2',
  templateUrl: './child2.component.html'
})
export class Child2Component implements OnInit, OnDestroy {
  active: boolean;
  private subscription: Subscription;

  constructor(private sharedState: SharedStateService) {}

  ngOnInit() {
    this.subscription = this.sharedState.active$.subscribe(value => {
      this.active = value;
    });
  }

  ngOnDestroy() {
    // 销毁订阅防止内存泄漏
    this.subscription.unsubscribe();
  }
}

child2.component.html

<div *ngIf="active">通过共享服务拿到child1的active状态啦！</div>

方案选择建议： #

• 如果只是简单的两个兄弟组件通信，方案1或方案2足够用，代码量少，容易维护；
• 如果有多个组件需要共享这个状态，或者组件层级较深，**方案3（共享服务）**是更合适的选择，扩展性更强。

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