526互联

2023最新高级难度Angular面试题,包含答案。刷题必备！记录一下。

发布时间 2023-12-06 17:50:29作者: 小满独家

好记性不如烂笔头

内容来自 面试宝典-高级难度Angular面试题合集

问: 解释一下Angular中的变化检测（Change Detection）是如何工作的？请介绍Angular的默认变化检测策略以及如何优化变化检测性能。

Angular 中的变化检测（Change Detection）是一个自动化的过程，用于检查组件树中的所有数据绑定是否发生变化。当检测到变化时，Angular 会更新相关的 DOM 元素以反映新的状态。

默认情况下，Angular 使用一种称为 "脏检查" 的策略进行变化检测。在这种策略下，每当 Angular 应用程序接收到一个事件（例如用户输入、异步响应或定时器事件），或者组件的生命周期钩子被调用时，Angular 会从根组件开始遍历整个组件树，并对每个组件执行变化检测。

这个过程包括：

  1. 比较当前值：对于每个组件，Angular 将检查其模板中所有的数据绑定表达式，将它们的当前值与上次检测时的值进行比较。
  2. 触发变更：如果检测到某个表达式的值发生了改变，Angular 将触发相应的 DOM 更新，以及可能的组件生命周期方法调用。
  3. 递归检测：一旦一个组件发生改变，Angular 还会继续对其子组件进行变化检测，确保整个组件树都被正确地更新。

然而，这种默认的变化检测策略可能会导致性能问题，特别是在大型和复杂的组件树中。为了优化变化检测性能，可以采取以下一些策略：

  1. 使用 OnPush 策略：

    • OnPush 是另一种变化检测策略，它只在组件的输入属性发生变化时才执行变化检测。
    • 当组件声明为 OnPush 模式时，Angular 只会在以下两种情况之一时才会运行变化检测：
      a. 组件的输入属性发生了变化。
      b. 组件的生命周期钩子被调用，或者有异步操作（如 HTTP 请求）完成。
    • 这种策略大大减少了变化检测的工作量，因为只有受影响的组件及其直接子组件需要被检测。

  2. 避免不必要的更改检测：

    • 在不涉及任何数据绑定的函数中，避免使用 setTimeout()、setInterval() 或其他异步操作，因为这些操作会导致全局范围内的变化检测。
    • 使用 ChangeDetectorRef.detach() 方法手动断开组件的变化检测连接，然后在适当的时候重新连接。

  3. 使用 ChangeDetectionStrategy.OnPush 和 immutable 数据：

    • 如果你的数据是不可变的（即你不会修改对象本身，而是创建一个新的副本来表示数据的更改），那么你可以结合 OnPush 策略来提高性能。
    • 不可变的数据使得 Angular 可以通过简单的引用比较来判断数据是否发生了变化，而不是进行深度比较。

  4. 减少作用域内数据的数量：

    • 减少组件内部作用域内的数据数量可以降低变化检测的时间复杂度。
    • 避免在组件中使用大量的数组或对象，因为这会导致更多的数据比较。

  5. 利用 RxJS 操作符：

    • 使用 RxJS 操作符，如 debounceTime()、switchMap() 等，可以控制何时触发变化检测。

  6. 懒加载组件：

    • 对于不经常使用的组件，考虑使用路由懒加载，这样可以延迟加载这些组件，直到真正需要它们时再进行变化检测。

通过以上这些策略，可以显著优化 Angular 的变化检测性能，使其更适应大规模的应用场景。

问: Angular中的服务提供器（Provider）有哪些不同的方式？请解释一下每种方式的适用场景和区别。

在Angular中，服务提供器（Provider）是用于注册和创建依赖注入对象的。有多种不同的方式来定义一个服务提供器，包括工厂、值、类、使用useClass、使用useValue以及使用useFactory。以下是每种类型的简要解释及其适用场景：

  1. 工厂（Factory Provider）：
    使用工厂函数来创建并返回服务实例。这种方式适用于需要动态生成服务或基于特定条件创建不同实现的情况。

    providers: [
  {
    provide: ProductService,
    useFactory: () => {
      if (condition) {
        return new ProductServiceA();
      } else {
        return new ProductServiceB();
      }
    },
  },
]

  2. 值（Value Provider）：
    提供一个静态值作为服务。当服务只需要固定不变的数据时，可以使用这种类型。

    providers: [
  { provide: 'API_URL', useValue: 'https://api.example.com/' },
]

  3. 类（Class Provider）：
    指定一个构造函数用来创建服务实例。这是最常见的创建服务的方式，适用于大多数情况。

    providers: [ProductService],

  4. useClass：
    类似于类提供器，但允许你在不直接将类名放在提供器数组中的情况下指定一个类来创建服务实例。这在某些特殊情况下非常有用，比如当你想要根据环境变量动态选择服务实现时。

    providers: [
  {
    provide: ProductService,
    useClass: environment.production ? ProductionService : DevelopmentService,
  },
],

  5. useValue：
    类似于值提供器，但允许你以更灵活的方式传递值。它可以接受任何类型的值，而不仅仅是字符串。通常与InjectionToken一起使用。

    const API_CONFIG = new InjectionToken('API_CONFIG');

providers: [
  { provide: API_CONFIG, useValue: { apiUrl: 'https://api.example.com/' } },
],

  6. useFactory：
    与工厂提供器类似，但是允许你定义一个独立的工厂函数，并且这个函数可以在没有依赖的情况下被调用。如果你的服务实例化过程需要复杂的逻辑或者多个依赖，那么useFactory可能是更好的选择。

    providers: [
  {
    provide: ApiService,
    useFactory: (http: HttpClient) => {
      return new ApiService(http);
    },
    deps: [HttpClient],
  },
],

理解这些提供器的不同之处可以帮助你更好地设计你的应用程序和服务结构，确保代码的可维护性和可测试性。

问: 解释一下Angular中的动态表单（Reactive Forms）和模板驱动表单（Template-driven Forms）之间的区别，并说明它们各自的优缺点。

Angular中的表单有两种主要类型：动态表单（Reactive Forms）和模板驱动表单（Template-driven Forms）。这两种表单都有其独特的特性和使用场景，以及各自的优缺点。

1. 动态表单（Reactive Forms）

  • 定义：Reactive Forms 是一种在组件类中创建、维护和更新表单的机制。它依赖于 Angular 的 @angular/forms 模块，并利用了响应式编程的思想来处理表单数据。

  • 优点：

    • 更强的可控制性：通过在组件类中直接操作表单控件实例，可以更精细地控制表单的行为。
    • 更好的测试性：由于表单逻辑位于组件类中，因此更容易进行单元测试。
    • 异步验证：支持异步验证，这对于复杂的业务规则检查很有用。
    • 灵活性：可以动态添加或删除表单控件。

  • 缺点：

    • 代码量较大：需要在组件类中编写较多的代码来设置表单结构和行为。
    • 学习曲线较陡峭：对于初学者来说，理解如何使用 Reactive Forms 可能比 Template-driven Forms 要困难一些。

2. 模板驱动表单（Template-driven Forms）

  • 定义：Template-driven Forms 是一种在 HTML 模板中声明表单控件和验证规则的方式。它利用了 Angular 的指令系统（如 ngModel 和 ngForm）来实现双向数据绑定和表单状态管理。

  • 优点：

    • 简洁性：只需要在模板中使用 Angular 指令即可创建表单，不需要额外的组件类代码。
    • 直观易懂：对于熟悉 Angular 指令和双向数据绑定的开发者来说，模板驱动表单非常直观。
    • 适合小型项目：如果项目的表单需求相对简单，那么模板驱动表单是一个不错的选择。

  • 缺点：

    • 控制能力有限：与 Reactive Forms 相比，模板驱动表单提供的对表单控件的控制程度较低。
    • 测试难度大：由于表单逻辑分散在模板中，因此很难进行单元测试。
    • 不支持异步验证：模板驱动表单不支持异步验证，这意味着复杂业务规则检查可能会比较困难。

总结起来，如果你正在构建一个大型应用程序，需要精细的表单控制和更好的可测试性，那么 Reactive Forms 是一个更好的选择。然而，如果你正在开发一个小规模的项目，或者想要快速构建简单的表单，那么 Template-driven Forms 可能更适合你。

问: Angular中的渲染机制是如何工作的？请解释一下Angular的渲染流程以及如何使用渲染策略来优化渲染性能。

Angular中的渲染机制基于组件树和变更检测系统，它负责将应用程序的状态映射到用户界面。以下是Angular渲染流程的简要概述：

  1. 创建组件树：
    当 Angular 应用启动时，它会解析模板并生成一个组件树。每个组件都包含一组指令（如 ngIf 和 ngFor）和属性绑定。

  2. 变更检测：
    Angular 使用一种称为“脏检查”的策略来跟踪组件状态的变化。当应用程序的状态发生变化时，Angular 会遍历组件树，并检查每个组件及其子组件是否有任何更改。这个过程可以通过使用OnPush策略来进行优化，OnPush策略只在输入属性发生变化时执行局部变更检测。

  3. 视图更新：
    如果检测到状态变化，Angular 将重新计算受影响的视图部分，并调用相应的DOM更新方法。这些更新可以是属性更新、类名更改、样式更改或节点插入/删除等操作。

  4. 异步变更检测：
    在某些情况下，例如当事件处理程序触发变更检测时，Angular 可能会暂停当前的变更检测周期并在稍后继续。这被称为“异步变更检测”，有助于避免长时间运行的操作阻塞UI。

为了优化Angular的渲染性能，开发人员可以利用以下策略：

  • 选择性地启用变更检测：通过使用 ChangeDetectorRef.detach() 和 ChangeDetectorRef.reattach() 方法，可以在需要时手动控制变更检测。
  • 使用OnPush变更检测策略：将组件的变更检测策略设置为 OnPush，可以显著减少变更检测的工作量。只有当组件的输入属性发生变化时，才会执行局部变更检测。
  • 避免在循环中进行DOM操作：尽可能在Angular变更检测之外执行复杂的DOM操作，以防止不必要的视图更新。
  • 预取数据：在服务器端渲染之前预先获取页面所需的数据，可以减少客户端获取数据的时间，从而提高初始加载速度。
  • 使用懒加载：对于大型应用，使用路由懒加载可以按需加载模块和组件，减少初始加载时间。
  • 优化资源加载：压缩和合并静态资源，延迟加载非关键资源，以及使用CDN加速内容分发。

这些策略可以帮助改善Angular应用的性能，特别是对于那些需要快速响应用户交互或者有大量数据展示的应用来说至关重要。

问: 解释一下Angular中的编译（Compilation）是如何工作的？请介绍Angular的编译过程以及如何使用AOT（Ahead of Time）编译来提升应用性能。

Angular中的编译过程是将应用的组件、模板和其他代码转换为可以在浏览器中运行的JavaScript代码。这个过程可以分为两个阶段：Angular CLI编译和浏览器端编译。

  1. Angular CLI编译：
    当使用Angular CLI构建项目时，它会执行一系列编译步骤，包括类型检查、模块解析、资源打包等。这些步骤最终生成一个或多个JavaScript文件，以及相关的HTML和CSS文件。这个过程也可以选择启用AOT（Ahead of Time）编译。

  2. 浏览器端编译：
    在浏览器中加载Angular应用程序时，Angular框架会进行第二次编译。这个过程称为JIT（Just-in-Time）编译，它负责解析和编译组件和指令的元数据，以及处理动态模板表达式。JIT编译是在运行时发生的，因此可能会导致初始加载时间增加。

相比之下，AOT编译发生在开发过程中，而不是在运行时。通过使用AOT编译，Angular CLI会在构建阶段提前解析和编译所有的组件和指令元数据，并将结果嵌入到生成的JavaScript文件中。这样，在浏览器中加载应用程序时，就不需要再执行复杂的编译步骤了。

以下是AOT编译的一些优势：

  • 更快的启动性能：因为大部分编译工作已经预先完成，所以用户在访问应用时不需要等待编译，这显著减少了初始加载时间。
  • 更小的payload：AOT编译器能够消除未使用的代码和优化静态标记，从而减小最终的JavaScript文件大小。
  • 更好的安全性：AOT编译有助于防止某些类型的注入攻击，因为它消除了对动态代码执行的需求。
  • 更少的运行时错误：许多常见的模板错误在AOT编译期间就可以被检测出来，而不是在用户的设备上运行时才出现。

要使用AOT编译，你需要在Angular CLI配置中启用它。通常，你可以通过修改angular.json文件中的“architect”部分来指定何时使用AOT编译。例如，对于生产环境的构建，你可能希望总是启用AOT编译。

问: Angular中的依赖注入（Dependency Injection）是如何实现的？请解释一下Angular的依赖注入原理以及如何使用自定义注入器来管理依赖关系。

Angular中的依赖注入（Dependency Injection，简称DI）是一种设计模式，用于将服务或对象的依赖项自动提供给它们。它通过一个称为注入器（Injector）的系统来实现，该系统负责创建、存储和管理依赖关系。

Angular的依赖注入原理基于以下几个关键概念：

  1. 依赖：这些是应用程序中需要的服务或其他对象。
  2. 提供者（Provider）：定义了如何创建和返回依赖实例。它们可以是一个类、工厂函数、值或者使用useClass、useValue和useFactory配置的对象。
  3. 注入器：负责创建和管理依赖实例的容器。每个组件都有自己的注入器，而模块有一个根注入器。
  4. 注入令牌：一种标识符，用于在注入器中查找依赖项。它可以是一个类、字符串或者自定义的 InjectionToken 对象。

当Angular需要一个依赖时，它会在当前组件的注入器中查找相应的提供者。如果找不到，它会向上遍历父组件的注入器，直到找到根注入器。如果在所有注入器中都没有找到匹配的提供者，Angular将会抛出一个错误。

要使用自定义注入器来管理依赖关系，你可以创建一个新的注入器，并为其添加提供者。然后，你可以使用这个注入器来获取依赖项。这种方法通常用于在某些特定情况下覆盖默认的依赖关系管理。

以下是如何创建和使用自定义注入器的基本步骤：

  1. 创建一个新的注入器实例：

    const customInjector = ReflectiveInjector.resolveAndCreate([
  { provide: MyService, useClass: MyCustomService },
]);

  2. 使用自定义注入器获取依赖项：

    const myServiceInstance = customInjector.get(MyService);

请注意，自定义注入器并不常用，大多数情况下，你只需要使用Angular提供的默认注入器即可满足需求。但是，在某些特殊场景下，例如测试或运行时动态改变依赖关系，自定义注入器可能会派上用场。

问: 解释一下Angular中的路由解析策略（Route Resolvers）是什么？请介绍一下如何使用路由解析策略来预先加载数据。

Angular中的路由解析策略（Route Resolvers）是一种机制，允许你在用户导航到某个路由之前预先加载所需的数据。当用户点击一个链接或通过其他方式触发路由导航时，路由器会首先执行与该路由关联的解析器，并等待解析器完成其工作后才会激活目标组件。

使用路由解析策略的主要目的是提高用户体验，因为它可以确保在用户看到新页面之前，所有必需的数据都已经加载完毕。这避免了用户在看到空白屏幕或加载指示器时的等待时间。

以下是如何使用路由解析策略来预先加载数据的基本步骤：

  1. 创建解析器：
    首先，你需要创建一个实现 Resolve 接口的类。这个类应该有一个 resolve() 方法，它返回一个承诺（Promise），并在解析过程中解决该承诺。

    import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { UserService } from './user.service';

@Injectable()
export class UserResolver implements Resolve<any> {
  constructor(private userService: UserService) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any>|Promise<any>|any {
    return this.userService.fetchUser(route.params.id);
  }
}

  2. 将解析器添加到路由配置中：
    在路由模块中，你需要将解析器添加到路由配置中。这可以通过在 resolve 属性中指定解析器的服务名来实现。

    import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserComponent } from './user.component';
import { UserResolver } from './user-resolver.service';

const routes: Routes = [
  {
    path: 'user/:id',
    component: UserComponent,
    resolve: {
      user: UserResolver,
    },
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

  3. 在目标组件中访问解析后的数据：
    最后，在目标组件（在这个例子中是 UserComponent）中，你可以通过 ActivatedRoute 服务的 data 属性来访问解析后的数据。

    import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-user',
  template: `
    <h1>{{ (user | async)?.name }}</h1>
    <p>{{ (user | async)?.email }}</p>
  `,
})
export class UserComponent implements OnInit {
  user: any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.user = this.route.data.subscribe(data => data['user']);
  }
}

这样，每当用户尝试导航到 /user/:id 路由时，路由器会先调用 UserResolver 来获取用户数据。一旦数据加载完毕，路由器才会激活 UserComponent 并显示数据。

问: Angular中的服务工作器（Service Worker）是什么？请解释一下如何使用服务工作器来实现离线应用和推送通知。

Angular中的服务工作器（Service Worker）是一个运行在浏览器后台的脚本，它独立于网页，即使用户关闭了所有标签页或离开了网站，也可以继续运行。服务工作器允许开发人员拦截网络请求、缓存资源，并在离线时提供已缓存的内容。此外，服务工作器还可以用来实现推送通知。

以下是使用Angular的服务工作器来实现离线应用和推送通知的基本步骤：

  1. 设置项目以支持PWA：
    要使用服务工作器，你需要先将你的Angular项目配置为支持渐进式Web应用程序（PWA）。你可以通过Angular CLI命令 ng add @angular/pwa 来轻松地完成这一步骤。

  2. 启用并配置服务工作器：
    在项目的 src/app 目录下，有一个名为 ngsw-config.json 的文件。这个文件用于配置服务工作器的行为，包括要缓存哪些资源以及如何更新这些资源。

  3. 实现离线应用：
    一旦你启用了服务工作器，它就会自动开始缓存你的应用的主要资源。当你访问过一次应用后，即使在离线状态下，也能再次访问到之前缓存过的页面。

  4. 实现推送通知：
    要在Angular中实现推送通知，你需要使用一个支持推送通知的服务，如Firebase Cloud Messaging (FCM) 或者OneSignal。通常，你需要在服务工作器中注册一个事件监听器来处理推送通知。

    首先，你需要创建一个名为 firebase-messaging-sw.js 的文件，该文件将作为服务工作器的推送通知部分。在这个文件中，你可以注册一个消息监听器来处理推送通知。

    importScripts('https://www.gstatic.com/firebasejs/7.8.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.8.0/firebase-messaging.js');

firebase.initializeApp({
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  databaseURL: 'YOUR_DATABASE_URL',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
});

const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function(payload) {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
    body: 'Background Message body.',
    icon: '/firebase-logo.png'
  };

  return self.registration.showNotification(notificationTitle,
    notificationOptions);
});

  5. 在Angular应用中发送推送通知：
    要从Angular应用中发送推送通知，你需要调用相关的API，例如Firebase Cloud Messaging的API。

以上就是使用Angular的服务工作器来实现离线应用和推送通知的基本流程。请注意，具体实现可能会因所使用的推送通知服务而有所不同。

问: 解释一下Angular中的性能优化技巧，包括懒加载模块、惰性加载组件、预渲染等方面的内容。

Angular中的性能优化技巧主要涉及以下几个方面：

  1. 懒加载模块（Lazy Loading）：
    懒加载是一种技术，允许应用在需要时才加载额外的代码。在Angular中，你可以使用路由懒加载来按需加载不同的功能模块。这样可以减少初始加载时间，因为用户只会在访问特定功能时加载相应的代码。

    要实现路由懒加载，你需要在你的路由配置中使用 loadChildren 属性代替 component 属性，并提供一个指向包含模块导入和路由配置的文件的路径。

  2. 惰性加载组件（On-Demand Component Loading）：
    惰性加载组件是另一种性能优化策略，它允许你根据条件或需求动态地加载和卸载组件。这有助于减少内存占用并提高应用程序的响应速度。

    为了实现组件的惰性加载，你可以使用 ComponentFactoryResolver 和 ViewContainerRef 服务来创建、插入和删除组件。

  3. 预渲染（Prerendering）：
    预渲染是指在服务器端生成完整的HTML页面，然后将其发送给客户端。这可以提高搜索引擎优化（SEO），因为搜索引擎爬虫可以直接抓取到实际的HTML内容，而不是JavaScript生成的视图。

    Angular CLI提供了内置的预渲染支持。要启用预渲染，你需要在项目的 angular.json 文件中设置 "prerender" 选项为 true，并指定要预渲染的路由列表。

  4. 变更检测优化：
    Angular通过其变更检测系统跟踪数据变化并更新视图。然而，这个过程可能会消耗大量资源。你可以通过以下方式优化变更检测：

    • 使用 OnPush 变更检测策略：这是一种告知Angular仅当输入属性发生变化时才检查组件的方法。
    • 避免不必要的变更检测：例如，避免在循环中调用引起变更检测的方法，如 setTimeout 或 setInterval。
    • 使用 ChangeDetectorRef.detach() 和 ChangeDetectorRef.reattach() 方法手动控制组件的变更检测。

  5. 资源优化：

    • 压缩和合并静态资源，如CSS和JavaScript文件。
    • 使用CDN加速内容分发。
    • 利用HTTP缓存和浏览器缓存。

  6. AOT编译：
    AOT（Ahead of Time）编译可以在构建阶段提前解析和编译组件和指令元数据，从而减小运行时的工作量，提高启动性能。

以上就是一些常见的Angular性能优化技巧。这些方法可以帮助你改善应用的加载速度、响应时间和资源利用效率，从而提供更好的用户体验。

问: Angular中的国际化（i18n）是如何实现的？请解释一下Angular的国际化机制以及如何使用翻译器来进行多语言支持。

Angular中的国际化（i18n）是一种允许你创建支持多种语言的应用程序的技术。Angular提供了一种称为@angular/localize的内置模块，用于处理国际化和本地化需求。

以下是Angular的国际化机制以及如何使用翻译器来进行多语言支持的基本步骤：

  1. 启用i18n：
    首先，你需要在项目中启用i18n功能。这可以通过在你的 tsconfig.json 文件中设置 "localize" 选项为 true 来实现。

  2. 标记要翻译的文本：
    在你的HTML模板中，你可以使用 i18n 属性来标记需要进行翻译的文本。例如：

    <h1 i18n="Welcome to the app!">Welcome to the app!</h1>

  3. 提取翻译字符串：
    使用Angular CLI命令 ng extract-i18n 可以从源代码中提取出所有被标记为需要翻译的字符串，并将它们保存到一个名为 messages.xlf 的文件中。这个文件可以被翻译人员用来添加其他语言的译文。

  4. 提供翻译文件：
    对于每一种支持的语言，你需要提供一个包含已翻译字符串的 .xlf 文件。这些文件通常与原始的 messages.xlf 文件具有相同的结构，但包含了对应语言的译文。

  5. 配置应用以支持多语言：
    在你的应用程序中，你需要告诉Angular它应该使用哪些翻译文件。这可以在 app.module.ts 中通过 registerLocaleData 函数和 LOCALE_ID 注入令牌来完成。

  6. 选择并切换语言：
    要让用户能够选择他们想要的语言，你可以创建一个组件或服务来管理当前的语言设置。然后，你可以根据用户的选择来更新 LOCALE_ID 注入令牌的值。

  7. 使用翻译器（TranslateService）：
    Angular提供了 TranslateService 类，它可以用来动态地加载和切换不同的翻译文件。你可以使用这个服务来获取当前选定语言的译文。

以下是一个简单的示例，展示了如何在Angular中使用 TranslateService：

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

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ welcomeMessage }}</h1>
    <button (click)="changeLanguage('en')">English</button>
    <button (click)="changeLanguage('fr')">French</button>
  `,
})
export class AppComponent implements OnInit {
  welcomeMessage: string;

  constructor(private translate: TranslateService) {}

  ngOnInit() {
    this.translate.setDefaultLang('en');
    this.translate.get('welcome').subscribe((translation) => {
      this.welcomeMessage = translation;
    });
  }

  changeLanguage(language: string) {
    this.translate.use(language);
    this.translate.get('welcome').subscribe((translation) => {
      this.welcomeMessage = translation;
    });
  }
}

在这个示例中，我们首先设置了默认的语言为英语，然后在初始化时获取了欢迎消息的译文。当用户点击按钮改变语言时，我们更新了 TranslateService 的语言设置，并重新获取了欢迎消息的译文。