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

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

如果您正在寻找一种可能仍然是一种不错的编码技术的简单解决方案，那么我将研究Ionic Events。

我见过的最好的教程是在Alligator.io上：

Using Events in Ionic to Pass Data & Messages Between Pages

基本上，您可以执行其他答案中的操作，但是基本上，您可以在网站的一个页面/组件/部分中执行以下操作：

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

更改用户名应在所有其他页面上生效

2 个答案: