1

我想实现以下两个功能：

  1. 切换按钮开/关。（不希望在此处打开新的详细信息页面）
  2. 单击 CardView 新的详细信息页面应打开。

单击 cardView 新详细信息页面打开，这按预期工作。但是，目前在点击切换按钮时会打开新页面。我需要帮助来避免它。

卡片视图的 HTML 代码：

<ion-list *ngFor="let individual_room of data?.rooms">
        <ion-list-header>
            <ion-label>{{ individual_room.name}}</ion-label>
        </ion-list-header>
        <ion-grid>
            <ion-row>
                <ion-col *ngFor="let device of individual_room.devices">
                    <ion-card (click)="openDetailsWithState(device)">
                        <ion-col><img src="assets/icon/favicon.png" /></ion-col>
                        <ion-card-content>
                            <ion-card-title> {{ device.name }} <ion-badge item-end>{{ device.company }} </ion-badge> </ion-card-title>
                            <ion-toggle (ionChange)="deviceStatusChange(device)" [checked]="device.state =='ON'"></ion-toggle>
                        </ion-card-content>
                    </ion-card>
                </ion-col>
            </ion-row>
        </ion-grid>
    </ion-list>

home.page.ts ：

deviceStatusChange(device: any) {
        device.state = device.state === 'ON' ? 'OFF' : 'ON'
        console.log('device toggle switch : ' + device.state)
    }

    openDetailsWithState(device: any) {
        let navigationExtras: NavigationExtras = {
            state: {
                device: device,
            },
        }
        this.router.navigate(['details'], navigationExtras)
    }
4

0 回答 0