Question

我正在尝试在从第三方脚本获取某些数据的页面上使用Ionic 3 Segment，但Ionic3或Angular4不会绑定离子段标记上的更改。

Ionic未激活所选按钮，ngSwitch也根本不工作。

在ngOnInit（）方法上成功请求第三方库，并且页面已呈现，但根本没有绑定任何事件。

但是当代码执行时：

this.segment.ngAfterViewInit();

触发TypeScript错误：

Property 'ngAfterViewInit' does not exist on type 'Segment'.

这是我的Checkout页面：

import {ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
import {IonicPage, NavController, NavParams, Segment} from 'ionic-angular';
import {CartProvider} from "../../providers/cart/cart";

export class CheckoutPage implements OnInit {

    @ViewChild(Segment)
    segment: Segment;

    paymentMethod: string = "CREDIT_CARD";
    paymentMethods: Array<any> = new Array();

    creditCard = {
        num: '',
        cvv: '',
        monthExp: '',
        yearExp: '',
        brand: '',
        token: ''
    };

    constructor(public navCtrl: NavController,
                public navParams: NavParams,
                private cart: CartProvider,
                private ref: ChangeDetectorRef) {
    }

    ngOnInit() {
        PagSeguroDirectPayment.getPaymentMethods({
            amount: this.cart.total,
            success: response => {
                let paymentMethods = response.paymentMethods;
                this.paymentMethods = Object.keys(paymentMethods)
                    .map((key) => paymentMethods[key]);
                this.ref.detectChanges();
                this.segment.ngAfterViewInit();
            }
        });
    }
}

这是我的结帐模板：

<ion-header>
    <ion-navbar>
        <button ion-button menuToggle>
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title>Checkout</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>

    <ion-segment [(ngModel)]="paymentMethod">
        <ion-segment-button *ngFor="let p of paymentMethods" value="{{p.name}}">
            {{p.name}}
        </ion-segment-button>
    </ion-segment>
    <div [ngSwitch]="paymentMethod">
        <div *ngSwitchCase="'BOLETO'">
            <ion-card>
                <ion-card-header>
                    Total: <strong>{{cart.total}}</strong>
                </ion-card-header>
            </ion-card>
            <ion-card>
                <button ion-button>Generate</button>
            </ion-card>
        </div>
        <div *ngSwitchCase="'CREDIT_CARD'">
            <ion-list>
                <ion-item>
                    <ion-label>Card Number</ion-label>
                    <ion-input type="text" value="" [(ngModel)]="creditCard.num"></ion-input>
                </ion-item>
                <ion-item>
                    <ion-label>CVV</ion-label>
                    <ion-input type="text" value="" [(ngModel)]="creditCard.cvv"></ion-input>
                </ion-item>
                <ion-item>
                    <ion-label>Month</ion-label>
                    <ion-input type="text" [(ngModel)]="creditCard.monthExp"></ion-input>
                </ion-item>
                <ion-item>
                    <ion-label>Year</ion-label>
                    <ion-input type="text" [(ngModel)]="creditCard.yearExp"></ion-input>
                </ion-item>
            </ion-list>
            <button (click)="runPayment()" ion-button>Pay</button>
        </div>
    </div>
    <ion-list>
        <ion-item *ngFor="let i of cart.items">
            {{i.name}} - R$ {{i.price}}
        </ion-item>
    </ion-list>
    <button (click)="goToCheckout()" ion-button>Checkout</button>
</ion-content>

以下是我的规格：

Ionic Framework: 3.6.0
Ionic App Scripts: 2.1.3
Angular Core: 4.1.3
Angular Compiler CLI: 4.1.3
Node: 8.1.2
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36

我习惯了Ionic 2，所有代码都像魅力一样。根本不知道如何解决它！

Answer 1

您可以使用ionViewDidLoad()而不是ngAfterViewInit()

进入页面视图：

ionViewCanEnter（）
ionViewDidLoad（）
ionViewWillEnter（）
ionViewDidEnter（）

退出网页浏览：

ionViewWillLeave（）
ionViewDidLeave

Ionic 3 Segment ngAfterViewInit不工作

1 个答案: