启用离子导航栏按钮，从模式页提交

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

启用离子导航栏按钮，从模式页提交

回答

相关问题