html - 从模式页面提交时启用 ionic 导航栏按钮

Question

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>

我正在使用 Ionic 2 开发一个新的移动应用程序，我正在尝试启用位于 ion-navbar 中的按钮，同时从模式页面成功提交。这是一张截图:voiture 按钮(在右上角)一开始是禁用的，我想在提交时启用它。 enter image description here

这是我的page2页面，ts文件和模态页面

Answer 1

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

注意 disabled 属性周围的 []。这允许您向属性添加逻辑。

然后在点击事件中你可以触发属性为true

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