更改用户名应该会影响所有其他页面

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 提供程序来实现此目的。

我指的是您输入用户名的页面 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

@yashpatelyk 的回答质量很好，也是最佳实践。但是，我花了很长时间才开始使用 rxjs 库，就像在这些示例代码中使用的那样。

如果您正在寻找一个更简单的解决方案，但它仍然是一种不错的编码技术，我会研究 Ionic Events。

我见过的最好的教程在 Alligator.io:

Using Events in Ionic to Pass Data & Messages Between Pages

基本上你可以做其他答案中所做的事情，但基本上，在你网站的一个 page/component/section 中你可以这样做：

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){
}

更改用户名应该会影响所有其他页面

Changing the username should effect in all other pages

ionic-framework

angular

ionic4