在组件之间传递带有路由 link 的数组

Question

我已经创建了一个组件，它是一个导航选项卡，我如何设法使 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>

Answer 1

这应该将您的数组传递给组件：

  <dashboard-navTabs [pages]="pages" active="ativos"></dashboard-navTabs>

来自 angular 文档 - 属性绑定

The brackets, [], cause Angular to evaluate the right-hand side of the assignment as a dynamic expression. Without the brackets, Angular treats the right-hand side as a string literal and sets the property to that static value. https://angular.io/guide/property-binding

在组件之间传递带有路由 link 的数组

pass array with route link between components

angular

ionic3