Изменение имени пользователя должно действовать на всех других страницах

Question

Я использую ionic4 / angular4. Изменения, внесенные в имя пользователя, должны отражаться на всех страницах.здесь я использую ngModel для привязки данных, но я не могу получить доступ к переменной ngModel на других страницах.Пожалуйста, помогите мне с правильным примером кода.

 <ion-input type="text" placeholder="Profile Name" [readonly]="isReadOnly" [(ngModel)]="username" name="profile"
          #nameCtrl="ngModel" required minlength="3" pattern="^[A-Za-zÀ-ÿ ,.'-]+$" (focusout)="out_profile()" #name
          no-padding>
        </ion-input

Answer 1

Вы можете использовать Angular Providers для достижения этой цели.

Я ссылаюсь на страницу, где вы вводите имя пользователя как username.component.ts

username.component.html

<ion-input type="text" placeholder="Profile Name" [readonly]="isReadOnly" [value]="username" name="profile"
      #nameCtrl="ngModel" required minlength="3" pattern="^[A-Za-zÀ-ÿ ,.'-]+$" (focusout)="out_profile()" #name
      no-padding
(input)="usernameChange(name.value)"
>
</ion-input

username.component.ts

// this will be called everytime you enter something in input field
// you can use debounceTime( 1000 ) here to delay that.
usernameChange(username) {
    this.usernameService.usernameChangeSubject.next(username);
}

username.service.ts

@Injectable()
export class UsernameService {
    usernameChangeSubject : Subject<string> = new Subject();
    usernameChange$ : Observable<string> = this.usernameChangeSubject.asObservable();
}

some-other-page.component.ts

username : string;
constructor(usernameService : UsernameService) {
    this.usernameService.usernameChange$.subscribe(newUsername => {
        // you will have updated username here, use newUsername
        this.username = newUsername;
    })
}

Answer 2

@ ответ яшпатателя - это качественный ответ и лучшая практика. Однако мне потребовалось много времени, чтобы разобраться с библиотекой rxjs, как будто она используется в этих примерах кода.

Если вы ищете, возможно, более простое решение, которое все еще является приличной техникой кодирования, я бы посмотрел на Ionic Events.

Лучший учебник, который я видел, на Alligator.io:

• Использование событий в Ionic для передачи данных и сообщений между страницами

По сути, вы можете делать то, что делается в другом ответе, но в основном на одной странице / компоненте / разделе вашего сайта вы можете сделать это:

handleClick(){
  this.events1.publish('my-message', '? Hello from page1!');
}

А потом в другом, вы можете сделать это:

constructor(public events2: Events){
  this.events2.subscribe('my-message', (data) =>{
    console.log(data); // ? Hello from page1!
  });
}

Все, что вам нужно сделать, это убедиться, что вы импортировали систему Events, а затем внедрили ее в свой конструктор, так же, как вы это делали бы с любым обычным сервисом.

Импортировать так:

import { Events } from 'ionic-angular';

Внедрить так:

constructor(public events: Events){
}