啓用離子導航欄按鈕，從模式頁提交

import { Component } from '@angular/core'; 
 

 
import { NavController, NavParams } from 'ionic-angular'; 
 
import {ModalPage} from '../modal-page/modal-page'; 
 
@Component({ 
 
    selector: 'page-page2', 
 
    templateUrl: 'page2.html' 
 
}) 
 
export class Page2 { 
 
    selectedItem: any; 
 
    icons: string[]; 
 
    items: Array<{title: string, note: string, icon: string}>; 
 
    public nb:ModalPage; 
 
    constructor(public navCtrl: NavController, public navParams: NavParams) { 
 
    // If we navigated to this page, we will have an item available as a nav param 
 
    this.selectedItem = navParams.get('item'); 
 

 
    // Let's populate this page with some filler content for funzies 
 
    this.icons = ['flask', 'wifi', 'beer', 'football', 'basketball', 'paper-plane', 
 
    'american-football', 'boat', 'bluetooth', 'build']; 
 

 
    this.items = []; 
 
    for (let i = 1; i < 11; i++) { 
 
     this.items.push({ 
 
     title: 'Item ' + i, 
 
     note: 'This is item #' + i, 
 
     icon: this.icons[Math.floor(Math.random() * this.icons.length)] 
 
     }); 
 
    } 
 
    
 
    
 
    } 
 

 
    itemTapped(event, item) { 
 
    // That's right, we're pushing to ourselves! 
 
    this.navCtrl.push(Page2, { 
 
     item: item 
 
    }); 
 
    } 
 

 
     enablebuttonn(){ 
 
    if (this.nb.login()){ 
 
console.log("button va être activée"); 
 
    } 
 
    } 
 
}

<ion-header> 
 
    <ion-navbar> 
 
    <button ion-button menuToggle> 
 
     <ion-icon name="menu"></ion-icon> 
 
    </button> 
 
    <ion-title>Page Two</ion-title> 
 
    <ion-buttons end> 
 
     
 
     <button ion-button icon-left> 
 
     <ion-icon name="paper"></ion-icon> 
 
     <span class="hide-xs">news</span> 
 
     </button> 
 

 
     <button ion-button #button1 disabled="true" icon-left (click)="enablebuttonn()"> 
 
     <ion-icon name="car"></ion-icon> 
 
     <span class="hide-xs">voiture</span> 
 
     </button> 
 

 
     <button ion-button icon-left (click)="showAlert()"> 
 
     <ion-icon name="chatbubbles"></ion-icon> 
 
     <span class="hide-xs">messages</span> 
 
     </button> 
 
     
 
<button ion-button icon-only > 
 
    <ion-icon name="more"></ion-icon> 
 
</button> 
 

 
    </ion-buttons> 
 
    </ion-navbar> 
 
</ion-header> 
 

 
<ion-content> 
 
    <ion-list> 
 
    <button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)"> 
 
     <ion-icon [name]="item.icon" item-left></ion-icon> 
 
     {{item.title}} 
 
     <div class="item-note" item-right> 
 
     {{item.note}} 
 
     </div> 
 
    </button> 
 
    </ion-list> 
 
    <div *ngIf="selectedItem" padding> 
 
    You navigated here from <b>{{selectedItem.title}}</b> 
 
    </div> 
 
</ion-content>

我在一家新的移動應用程序正在與離子2，我試圖讓位於離子導航欄按鈕同時從模態頁面提交成功。這是一個屏幕截圖：voiture按鈕（位於右上角）在開始時處於禁用狀態，我希望在提交時啓用它。 enter image description here

這是我的第2頁頁，TS文件和模態頁面

來源

2017-03-17 J.Luis

<button ion-button #button1 [disabled]="showButton" icon-left (click)="enablebuttonn()">

通知的[]圍繞disabled屬性。這允許您向屬性添加邏輯。

然後在點擊事件可以觸發屬性true

showbutton:boolean = false; 
.... 
constructor(){ 
} 
.... 
itemTapped(event, item) { 
    this.showbutton = true; 
    ... 
}

來源

2017-03-19 09:55:01

啓用離子導航欄按鈕，從模式頁提交

回答

相關問題