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

Question

I'm developing an application with the technologies shown below. I have a Typescript file called "test.page.ts", inside there is the variable "response: any"; I have to reuse this in another Typescript file called "test2.page.html", calling it that, {{response.name}}. How can I do it? Thank you.

Technologies that I currently use:

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

You can use Subject to do that. Here's a simple, basic example.

Working 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>

The service

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

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

Test.Component.ts (it handles the data received from the subscription)

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();
      }
    });
  }
}

The html

Current language : {{lang}}