Блог

Как я могу обновить значение из другого компонента и обновить его в Dom?

страница Главная.ts

 import { Component } from '@angular/core';
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

EmName = null
  constructor(private navCtrl: NavController,) {}

ngOnInit() {
 

  this.EmName = "jo"

}

ChangeValue(){
    this.navCtrl.navigateForward('/change');
}
    
   ch(){
     this.EmName = "New Val"
     console.log(this.EmName)
   }
  
}
 

изменение страницы.ts

 import { Component, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular';
import { HomePage } from '../home/home.page';
@Component({
  selector: 'app-change',
  templateUrl: './change.page.html',
  styleUrls: ['./change.page.scss'],
})
export class ChangePage implements OnInit {


constructor(private navCtrl: NavController,private homePage:HomePage ){}

  ngOnInit() {
  }

  next() {
    this.navCtrl.pop()
  this.homePage.ch()
    }
}
 

Значение переменной обновляется, но дисплей не обновляется, как на изображении

введите описание изображения здесь

Я новичок, и мне нужна помощь, спасибо.

Я думаю, вам нужно заставить представление обновиться. С помощью NgZone @angular/core вы можете это сделать. Для этого я увидел решение по этой ссылке: https://forum.ionicframework.com/t/how-to-properly-re-render-a-component-in-ionic-manually/97343

Спасибо, что вы сделали…

В зависимости от этого решения Обмен данными со службой

сервис.ts

 import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class DataService {

  private messageSource = new BehaviorSubject('default message');
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(message: string) {
    this.messageSource.next(message)
  }

}
 

родительский.компонент.ts

 import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-parent',
  template: `
    {{message}}
  `,
  styleUrls: ['./sibling.component.css']
})
export class ParentComponent implements OnInit, OnDestroy {

  message:string;
  subscription: Subscription;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.subscription = this.data.currentMessage.subscribe(message => this.message = message)
  }
  
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

}
 

родной брат.компонент.ts

 import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-sibling',
  template: `
    {{message}}
    <button (click)="newMessage()">New Message</button>
  `,
  styleUrls: ['./sibling.component.css']
})
export class SiblingComponent implements OnInit, OnDestroy {

  message:string;
  subscription: Subscription;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.subscription = this.data.currentMessage.subscribe(message => this.message = message)
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

  newMessage() {
    this.data.changeMessage("Hello from Sibling")
  }

}
 

Я еще раз благодарю всех вас.