#angular #ionic-framework
Вопрос:
Как я могу обновить значение из другого компонента и обновить его в 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()
}
}
Значение переменной обновляется, но дисплей не обновляется, как на изображении
введите описание изображения здесь
Я новичок, и мне нужна помощь, спасибо.
Комментарии:
1. не могли бы вы поделиться html-кодом
Ответ №1:
Я думаю, вам нужно заставить представление обновиться. С помощью NgZone @angular/core вы можете это сделать. Для этого я увидел решение по этой ссылке: https://forum.ionicframework.com/t/how-to-properly-re-render-a-component-in-ionic-manually/97343
Комментарии:
1. Спасибо за отзыв! Вам нужно не менее 15 репутации, чтобы проголосовать, но ваши отзывы были записаны.
Ответ №2:
Спасибо, что вы сделали…
В зависимости от этого решения Обмен данными со службой
сервис.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")
}
}
Я еще раз благодарю всех вас.