離子3段ngAfterViewInit不起作用

我想在從第三方腳本獲取一些數據的頁面上使用Ionic 3段，但是Ionic3或Angular4沒有綁定離子段標籤上的變化。離子3段ngAfterViewInit不起作用

Ionic不激活所選按鈕，ngSwitch也不工作。

ngOnInit（）方法成功請求第三方庫，並且呈現頁面，但沒有綁定任何事件。

但是當代碼執行：被觸發

this.segment.ngAfterViewInit();

一個打字稿錯誤：

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

我用離子2，和所有的代碼運行就像一個魅力。不知道如何解決它！

來源

2017-08-09 Gilberto Albino

你爲什麼叫'this.segment.ngAfterViewInit（）;'？ – Duannx

如果不使用.ngAfterViewInit（），由於某些原因，內容不會生效，我不知道！它適用於Ionic 2/Angular 2，但對於Ionic 3/Angular 4不起作用。 –

請您介紹一下關於這種方式的文檔嗎？我從來沒有見過像'ngAfterViewInit'這樣的使用 – Duannx

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

進入頁面視圖：

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

退出從頁面視圖：

ionViewWillLeave（）

ionViewDidLeave

來源

2017-08-10 10:35:41

看起來Segment類沒有更多功能ngAfterViewInit()現在。改爲使用ngAfterContentInit()。
您可以查找功能和propertive一類由按Ctrl +點擊到類名

來源

2017-08-12 08:48:20 Duannx

離子3段ngAfterViewInit不起作用

回答

相關問題