angular - Angular：如何将服务中的数据绑定到组件，以便服务中的新数据更新组件？

Question

当新数据到达服务时，如何使该数据出现在组件中？

在我的标题中，我有一个按钮，允许用户在英语和西班牙语之间切换应用程序。该按钮切换标题（一个组件）中的文本，而不是视图主体（另一个组件）中的文本。

ng new en-es
cd en-es
ng add @angular/material
ng generate component header
ng generate component body
ng generate service language

在app.module.ts添加

import { MatToolbarModule } from '@angular/material/toolbar';

  imports: [
    ...
    MatToolbarModule,
  ],

app-component.html将所有内容替换为：

<app-header></app-header>
<app-body></app-body>

header.component.html将所有内容替换为：

<mat-toolbar>

  <button mat-raised-button (click)="changeLanguage('en-US')">English</button>
  <div>&nbsp;&nbsp;</div>
  <button mat-raised-button (click)="changeLanguage('es')">Español</button>

  <div>&nbsp;&nbsp;</div>

  <div [ngSwitch]="displayLanguage">
    <p *ngSwitchCase="'en-US'">Hello world!</p>
    <p *ngSwitchCase="'es'">Hola mundo!</p>
    <p *ngSwitchDefault>Hello world!</p>
  </div>

</mat-toolbar>

header.component.ts将所有内容替换为：

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent {
  displayLanguage: string;

  constructor(
    private languageService: LanguageService,
  ) { }

  changeLanguage(language: string) {
    console.log(language);
    this.displayLanguage = language;
    this.languageService.changeLanguage(language);
  }
}

language.service.ts将所有内容替换为：

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';

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

  changeLanguage(language): Observable<string> {
    console.log(language);
    return of(language)
  }
}

body.component.html将所有内容替换为：

<div [ngSwitch]="displayLanguage">
  <p *ngSwitchCase="'en-US'">Change me into Spanish</p>
  <p *ngSwitchCase="'es'">¡Felicitaciones!</p>
  <p *ngSwitchDefault>Change me into Spanish</p>
</div>

body.component.ts将所有内容替换为：

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

@Component({
  selector: 'app-body',
  templateUrl: './body.component.html',
  styleUrls: ['./body.component.css']
})
export class BodyComponent implements OnInit {
  displayLanguage: string;

  constructor(
    private languageService: LanguageService,
  ) { }

  ngOnInit() {
    this.languageService.changeLanguage(this.displayLanguage).subscribe();
    console.log(this.displayLanguage);
  }
}

启动服务器：

ng serve -o

你应该看到：

单击Español按钮将视图更改为：

语言在标题中更改，但在正文中更改。控制台日志显示当应用加载时language.service.ts将数据发送到body.component.ts. 单击按钮将数据发送到header.component.ts和language.service.ts但不发送到，body.component.ts并且正文不会更改语言。

如何使单击按钮更改语言body.component.ts？

还有一件事......有没有一个网站可以让我放置这个软件，这样你就可以轻松地使用它了？笨蛋？我从来没有使用过这些工具。

标签： angular

Answer 1

在您的 LanguageService 中，使用 BehaviorSubject 创建一个变量，例如

export class LanguageService {

  language: BehaviorSubject = new BehaviorSubject<string>('en-US');

  changeLanguage(language): void {
    this.language.next(language);
  }

  getLanguage(): Observable<string> {
   return this.language.asObservable();
  }

}

body.component.ts

ngOnInit() {
  this.languageService.getLanguage().subscribe((language) => {
    this.defaultLanguage = language; 
  });
}