问题描述
我已经创建了一个导航选项卡组件,我如何设法使 action_go 功能工作推送到正确的路线?我试过这样但它没有用,因为我相信 navTab 组件无法读取 _pages 内的路由
NavTab.ts
import { Component,Input} from '@angular/core';
import { NavController } from 'ionic-angular';
import { UtilToastsProvider } from '../../../../providers/util/toasts';
@Component({
selector: 'dashboard-navTabs',templateUrl: 'navTabs.html'
})
export class Dashboard_NavTabs {
constructor(
public navCtrl: NavController,private utilToasts: UtilToastsProvider){}
private _pages: any;
private _active: string;
@input()
set pages(pages){
this._pages = pages;
}
@input()
set active(active){
this._active = active;
}
action__go(page) {
console.log("sjdijaisd",JSON.stringify(this._pages))
if (typeof this._pages[page] !== 'undefined') {
this.navCtrl.setRoot(this._pages[page])
} else {
this.utilToasts.create('tip',{
message: 'Funcionalidade indisponível no momento.',hideOkButton: true,timeout: 6000
})
}
}
}
NavTab.html
<div class="navTab-container">
<button [class.active]="_active === 'ativos'" (click)="action__go('ativos')">Ativos</button>
<button [class.active]="_active === 'efetivados'" (click)="action__go('efetivados')">Efetivados</button>
<button [class.active]="_active === 'cancelados'" (click)="action__go('cancelados')">Cancelados</button>
</div>
我使用 NavTab 的屏幕:ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { UtilToastsProvider } from './../../../../../providers/util/toasts';
import { Dashboard__Consultas_Agendamentos_Efetivados_02 } from '../02-efetivados/efetivados';
@Component({
selector: 'dashboard-consultas-agendamentos-inicio-01',templateUrl: 'inicio.html'
})
export class Dashboard__Consultas_Agendamentos_Inicio_01 {
constructor(
public navCtrl: NavController,private utilToasts: UtilToastsProvider){
}
public pages = {
'efetivados': Dashboard__Consultas_Agendamentos_Efetivados_02
}
}
我使用 NavTab 的屏幕:html
<ion-header>
<ion-navbar color="white">
<ion-title>Agendamentos</ion-title>
</ion-navbar>
</ion-header>
<ion-content no-bounce>
<div #page class="page">
<div class="page-content">
<dashboard-navTabs pages="{{pages}}" active="ativos"></dashboard-navTabs>
<h1>AGENdamENTOS</h1>
</div>
<dashboard-tabs active="home"></dashboard-tabs>
</div>
</ion-content>
解决方法
这应该将您的数组传递给组件:
<dashboard-navTabs [pages]="pages" active="ativos"></dashboard-navTabs>
来自 angular 文档 - 属性绑定
方括号 [] 使 Angular 计算右侧的 赋值作为动态表达式。没有括号,Angular 将右侧视为字符串文字并设置属性 到那个静态值。 https://angular.io/guide/property-binding