如何重用角度打字稿中的變量？

Question

我正在使用以下技術開發應用程序。 我有一個名為“ test.page.ts”的打字稿文件，里面有變量“ response：any”； 我必須在另一個名為“ test2.page.html”的Typescript文件中重用此文件，並將其稱為{{response.name}}。 我該怎么做？ 謝謝。

我目前使用的技術：

Ionic 4.10.2
Angular 6
8.1.2 (cordova-lib@8.1.1)
TypeScript
Visual Studio Code

test.page.ts

 import { Component, OnInit } from '@angular/core'; import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'; import { LoadingController, NavController, MenuController } from '@ionic/angular'; @Component({ selector: 'app-test', templateUrl: './test.page.html', styleUrls: ['./test.page.scss'], }) export class TestPage implements OnInit { response: any; searchTerm: any = ''; constructor(private http: HttpClient, private loadingCtrl: LoadingController, private navCtrl: NavController) { this.getData(); } ngOnInit() { } getData() { this.http.get('URL') .subscribe((response) => { this.response = response; console.log(this.response); }); } } 

Answer 1

您可以使用Subject來做到這一點。 這是一個簡單的基本示例。

可工作的stackblitz： https ://stackblitz.com/edit/angular-vts7zd ? file = src%2Fapp%2Ftest.component.ts

App.Component.ts

export class AppComponent  {
  isEnglish = true;
  constructor(private service: CommonService){ }

  setLang(){
    this.isEnglish = !this.isEnglish;
    (this.isEnglish) ? this.service.setLang('IT') : this.service.setLang('EN');
  }
}

App.component.html

<span style="cursor:pointer" (click)="setLang()">Click me to change language</span>
<br><br>
<my-test></my-test>

服務

@Injectable()
export class CommonService{
  private lang$ = new Subject<string>();
  public langEvent = this.lang$.asObservable();

  public setLang(lang){
    this.lang$.next(lang);
  }
}

Test.Component.ts（它處理從訂閱接收的數據）

export class TestComponent implements OnInit  {
  lang ="default";
  constructor(private service: CommonService, private cdr: ChangeDetectorRef) {}

  ngOnInit(){
    this.service.langEvent
    .subscribe(res => {
      if(!!res){
        this.lang = res;
        this.cdr.detectChanges();
      }
    });
  }
}

HTML

Current language : {{lang}}