2

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

コンポーネントのビューからオブジェクトにアクセスできます。しかし、私が望むのは、最初にコード ( .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">

しかし、コンポーネントコード自体からコンポーネントに渡されたパラメータにアクセスするにはどうすればよいでしょうか?

4

1 に答える 1

4

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...
  }
}
于 2016-08-16T09:14:17.973 に答える