angular - Ionic 3 Segment ngAfterViewInit 不起作用

Question

我尝试在页面上使用 Ionic 3 Segment，从第三方脚本获取一些数据，但 Ionic3 或 Angular4 没有绑定(bind) ionic-segment 标记上的更改。

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

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

但是当代码执行时:

this.segment.ngAfterViewInit();

触发 TypeScript 错误:

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

这是我的结账页面:

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()

进入页面 View :

1. ionViewCanEnter()
2. ionViewDidLoad()
3. ionViewWillEnter()
4. ionViewDidEnter()

退出页面 View :

ionViewWillLeave()

ionViewDidLeave