Ionic 2のコンポーネントにパラメータを渡す

Question

私のページの1つのパラメータ（ハッシュオブジェクト）をコンポーネントに渡そうとしています。

コンポーネントのビューからオブジェクトにアクセスできます。しかし、私が望むのは、コード（.ts）から最初に読んでから、ビューに渡すことです。

これは私が直接ビューからノードにアクセスする場合、それは<div *ngFor="let selected of node">

の作品しかし、どのように私は、コンポーネントのコード自体からのコンポーネントに渡されたのparamsにアクセスすることができます私のコード

#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> 

のですか？ Angular2 docsから

Answer 1

、あなたが

が傍受し 親から値に作用する入力プロパティのセッターを使用することができます。

子コンポーネント：

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