Передача параметров компоненту в 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">

Но как я могу получить доступ к Params, передаваемой в компоненты из самого кода компонента?

Answer 1

С Angular2 docs, вы можете

Использование входного свойства сеттер для перехвата и действовать по значению от родителя.

Детский компонент:

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... 
    } 
}