将参数传递给 Ionic 2 中的组件

Question

我正在尝试将一个参数（哈希对象）从我的一个页面传递到一个组件。

我可以从组件的视图访问对象。但我想要的是先从代码中读取它（.ts），然后传递给视图。

这是我的代码

#main page component
<selected-options [node]="node"></selected-options>

#selected-options component code
import { Component, Input } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'selected-options',
  templateUrl: 'build/components/selected-options/selected-options.html',
  inputs: ['node']
})
export class SelectedOptions {

  @Input() node: any;
  private selectedNodes: any;      

  constructor(public ryvuss: Ryvuss, public nav: NavController, public navParams: NavParams) {
     // I want to read the node object in here
     this.node = navParams.get('node');
     this.selectedNodes = //dosomething with node
  }
}

#selected-options component html view
<div *ngFor="let selected of selectedNodes">
  //loop
</div>

如果我直接从视图访问节点，它就可以工作<div *ngFor="let selected of node">

但是我如何访问从组件代码本身传递给组件的参数？

Answer 1

从Angular2 docs开始，您可以

Use an input property setter to intercept and act upon a value from the parent.

子组件：

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

@Component({
  selector: 'name-child',
  template: `
    <h3>"{{name}}"</h3>
  `
})
export class NameChildComponent {

  _name: string = '<no name set>';

  @Input()
  set name(name: string) {
    // Here you can do what you want with the variable
    this._name = (name && name.trim()) || '<no name set>';
  }

  get name() { return this._name; }
}

父组件：

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

@Component({
  selector: 'name-parent',
  template: `
    <h2>Master controls {{names.length}} names</h2>
    <name-child *ngFor="let name of names"
      [name]="name">
    </name-child>
  `
})
export class NameParentComponent {
  // Displays 'Mr. IQ', '<no name set>', 'Bombasto'
  names = ['Mr. IQ', '   ', '  Bombasto  '];
}

因此您的代码如下所示：

@Component({
  selector: 'selected-options',
  templateUrl: 'build/components/selected-options/selected-options.html'
})
export class SelectedOptions {

  private selectedNodes: any;      

  @Input()
  set node(node: any) {
    // Here you can do what you want with the variable
    this.selectedNodes. = ...;
  }

  constructor(public ryvuss: Ryvuss, public nav: NavController) {
    // your code...
  }
}

将参数传递给 Ionic 2 中的组件

Passing params to a component in Ionic 2

typescript

ionic-framework

ionic2

ionic3

angular