Angular 2跨组件调用方法实现项目布局方向切换

我来帮你解决这个问题～直接调用另一个组件的方法其实不是最推荐的做法（尤其是当组件不是直接父子关系时），耦合度太高不利于维护。更优雅的方式是通过共享服务来传递状态变化，让组件2自动响应语言切换。不过我也会把几种可行的方案都列出来，你可以根据实际的组件关系选择：

方案1：使用共享服务（首推，适用于任意组件关系） #

这是Angular组件间通信的标准操作，通过一个共享服务来发布语言变化的事件，组件2订阅这个事件后自动执行布局切换逻辑，完全不需要直接调用组件方法。

第一步：创建语言状态服务 #

先写一个简单的服务，用来管理语言变化的通知：

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

@Injectable({ providedIn: 'root' })
export class LanguageService {
  // 用Subject来发布语言更新事件
  private languageUpdated = new Subject<string>();
  // 暴露可观察对象给其他组件订阅
  languageUpdated$ = this.languageUpdated.asObservable();

  // 对外提供更新语言的方法
  changeLanguage(lang: string) {
    this.languageUpdated.next(lang);
  }
}

第二步：修改组件1，触发语言更新 #

在组件1里注入这个服务，当用户切换语言时，除了调用translate服务，还要通知共享服务：

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { LanguageService } from './language.service'; // 引入咱们的服务

@Component({
  selector: 'app-component1',
  templateUrl: './component1.component.html'
})
export class Component1 {
  currentLang: string;

  constructor(
    private translate: TranslateService,
    private langService: LanguageService
  ) {
    this.currentLang = translate.currentLang || 'fa'; // 初始化默认语言
  }

  onLangChange() {
    this.translate.use(this.currentLang);
    // 通知所有订阅者语言变了
    this.langService.changeLanguage(this.currentLang);
  }
}

对应的组件1 HTML也要改一下，把ngModelChange绑定到咱们的方法：

<md-select class="data_font" [(ngModel)]="currentLang" #langSelect="ngModel" (ngModelChange)="onLangChange()">
  <md-option *ngFor="let lang of translate.getLangs()" [value]="lang">
    <span class="data_font">{{ lang }}</span>
  </md-option>
</md-select>

第三步：修改组件2，订阅语言变化 #

在组件2里注入服务，订阅语言更新事件，然后自动调整布局方向：

import { Component, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
import { LanguageService } from './language.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-component2',
  templateUrl: './component2.component.html'
})
export class Component2 implements AfterViewInit, OnDestroy {
  @ViewChild('root') root;
  private langSub: Subscription;

  constructor(private langService: LanguageService) {}

  ngAfterViewInit() {
    // 初始化布局方向
    this.setDirection(this.langService.currentLang || 'fa');
  }

  ngOnInit() {
    // 订阅语言变化事件，一旦语言变了就调整布局
    this.langSub = this.langService.languageUpdated$.subscribe(lang => {
      this.setDirection(lang);
    });
  }

  // 封装布局切换逻辑，替代原来的RTL()方法
  setDirection(lang: string) {
    this.root.dir = lang === 'fa' ? 'rtl' : 'ltr';
  }

  // 组件销毁时一定要取消订阅，防止内存泄漏
  ngOnDestroy() {
    if (this.langSub) {
      this.langSub.unsubscribe();
    }
  }
}

这样一来，组件1和组件2完全解耦，不管它们在项目里是什么位置关系，都能正常工作，以后要加其他需要响应语言变化的组件也非常方便。

方案2：如果组件1是组件2的子组件（用@Output事件） #

如果组件1是嵌套在组件2里面的子组件，那用父子组件的事件传递更直接：

组件1添加输出事件 #

import { Component, Output, EventEmitter } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-component1',
  templateUrl: './component1.component.html'
})
export class Component1 {
  currentLang: string;
  @Output() langChanged = new EventEmitter<string>(); // 定义输出事件

  constructor(private translate: TranslateService) {
    this.currentLang = translate.currentLang || 'fa';
  }

  onLangChange() {
    this.translate.use(this.currentLang);
    this.langChanged.emit(this.currentLang); // 把选中的语言传给父组件
  }
}

组件2监听子组件事件 #

在组件2的HTML里引用组件1时绑定事件：

<app-component1 (langChanged)="setDirection($event)"></app-component1>
<div #root="$implicit" dir="rtl" > ...//some html code here </div>

然后组件2的TS里实现方法：

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

@Component({
  selector: 'app-component2',
  templateUrl: './component2.component.html'
})
export class Component2 implements AfterViewInit {
  @ViewChild('root') root;

  ngAfterViewInit(): void {
    this.setDirection('fa');
  }

  setDirection(lang: string) {
    this.root.dir = lang === 'fa' ? 'rtl' : 'ltr';
  }
}

方案3：直接调用组件2的方法（不推荐） #

如果一定要直接调用组件2的RTL()方法，只有当组件2是组件1的父组件，或者你能通过模板引用获取到组件2的实例时才能实现，但这种方式会让两个组件紧耦合，以后改代码很麻烦。

比如如果组件2在模板里有#component2的引用，组件1可以通过@ViewChild('component2') component2Instance: Component2;拿到实例，然后调用this.component2Instance.RTL();，但这种场景非常有限，所以不建议这么做。

总结一下，共享服务的方式是最灵活、最符合Angular设计思想的，不管组件是父子、兄弟还是跨模块都能适用，代码解耦好维护。

内容的提问来源于stack exchange，提问作者fariba.j