javascript - 如何在 ionic 3 的不同页面之间更改元素？

Question

我的问题是如何在这两个页面之间交换信息的逻辑。可能吗？

检查表有效，但我不知道如何在 goToNextPage () 函数返回成功后将成功/错误图标添加到房间名称旁边的“verifyplace.html”页面。如何在不同页面之间进行这种更改？

页面如下(.html 和 .ts):

verifyplace.html:

<ion-list>
      <button ion-item (click)="openRoom()">Room</button>
</ion-list>

我的 verifyplace.ts:

openSala(){
    this.navCtrl.push(VerifyroomPage);
}

我的验证室.html:

<ion-list>
    <ion-item *ngFor="let item of checkRoom">
      <ion-label>{{ item.title }}</ion-label>
      <ion-checkbox [(ngModel)]="item.checked" color="secondary"></ion-checkbox>
    </ion-item>

    <button ion-button color="secondary" (click)="goToNextPage()" full>Finish</button>
</ion-list>

我的验证室.ts:

public checkRoom = [
        {
            title: 'Checklist 1',
            checked: false
        },
        {
            title: 'Checklist 2',
            checked: false
        },
        {
            title: 'Checklist 3',
            checked: false
        }   
    ];

    goToNextPage() {
        if (this.checkSala.filter(c=>c.checked == false).length == 0) {
            this.navCtrl.push(VerifyplacePage);
            /*return on the previous page a success icon*/
        } else {
            this.navCtrl.push(VerifyplacePage);
            /*return on the previous page an error icon*/
        }
    }

Answer 1

这是我的理解；

您在 VerifyroomPage 页面上，您希望在传递一些参数时导航到另一个页面 (VerifyplacePage)。

您可以通过将对象作为 Ionic Nav Controller 上 push 方法的第二个参数传递来实现此目的。

/*return on the previous page a success icon*/
this.navCtrl.push(VerifyplacePage, {'data': 'success'});

或

/*return on the previous page an error icon*/
this.navCtrl.push(VerifyplacePage, {'data': 'error'});

第 2 步:

然后在 VerifyplacePage.ts 上

// create a variable to hold the data
thePageData

...

// in the constructor
public navParams: NavParams,

...


// get the data from the nav params and save it in the local variable
// we defined data as the key in the object on the nav controller
this.thePageData = this.navParams.get('data')

Read more on Navigation within ionic 3 here