Angular如何在自定义组件中调用AppComponent内的多语言切换等公共函数

你可以通过封装全局可注入服务的方式实现逻辑复用，这是Angular生态下最推荐的跨组件共享方法，具体实现步骤如下：

1. 新建全局语言管理服务 #

执行Angular CLI命令生成服务文件：

ng generate service services/language

将AppComponent中所有语言切换相关的逻辑迁移到该服务中，服务代码示例：

import { Injectable, Inject } from '@angular/core';
import { TranslateService } from "@ngx-translate/core";
import { DOCUMENT } from '@angular/common';

@Injectable({
  providedIn: 'root'
})
export class LanguageService {

  constructor(
    private translateService: TranslateService, 
    @Inject(DOCUMENT) private document: Document
  ) { }

  changeLanguage(lang: string) {
    let htmlTag = this.document.getElementsByTagName('html')[0] as HTMLHtmlElement;
    htmlTag.dir = lang === "ar" ? "rtl" : "ltr";
    this.translateService.setDefaultLang(lang);
    this.translateService.use(lang);
    this.changeCssFile(lang);
  }

  private changeCssFile(lang: string) {
    let headTag = this.document.getElementsByTagName("head")[0] as HTMLHeadElement;
    let existingLink = this.document.getElementById("langCss") as HTMLLinkElement;
    let bundleName = lang === "ar" ? "arabicStyle.scss" : "englishStyle.scss";

    if (existingLink) {
      existingLink.href = bundleName;
    } else {
      let newLink = this.document.createElement('link');
      newLink.rel = "stylesheet";
      newLink.id = "langCss";
      newLink.href = bundleName;
      headTag.appendChild(newLink);
    }
  }
}

2. 改造原有AppComponent #

移除AppComponent中重复的语言切换逻辑，改为注入LanguageService来调用，改造后代码：

import { Component } from '@angular/core';
import { LanguageService } from './services/language.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'labsystem';

  constructor(private languageService: LanguageService) {
    // 初始化默认语言，可根据需求自行调整
    this.languageService.changeLanguage('en');
  }
}

3. 在任意自定义组件中调用切换方法 #

以Navbar组件为例，直接注入LanguageService即可调用切换逻辑，无需重复编写代码：

// navbar.component.ts
import { Component } from '@angular/core';
import { LanguageService } from '../services/language.service';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent {
  constructor(private languageService: LanguageService) {}

  // 模板点击切换语言事件
  switchLang(lang: string) {
    this.languageService.changeLanguage(lang);
  }
}

如果你的组件层级很浅，仅AppComponent的直接子组件需要调用，也可以通过子组件输出事件的方式实现子组件触发父组件方法，但可维护性低于全局服务，不推荐多层级场景使用。

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