typescript 将参数传递给 Ionic 2 中的组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38969275/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Passing params to a component in Ionic 2
提问by sameera207
I'm trying to pass a parameter (a hash object) from one of my pages to a component.
我试图将一个参数（一个哈希对象）从我的一个页面传递到一个组件。
I can access the object from the view of the component. But what I want is to read it first from the code (.ts) and then pass to the view.
我可以从组件的视图访问对象。但我想要的是先从代码 ( .ts) 中读取它，然后传递给视图。
This is my code
这是我的代码
#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>
If I directly access the node from view it works <div *ngFor="let selected of node">
如果我直接从视图访问节点，它就可以工作 <div *ngFor="let selected of node">
But how can I access the params passed in to the components from component code itself ?
但是如何访问从组件代码本身传递给组件的参数？
回答by sebaferreras
From Angular2 docs, you can
从Angular2 文档，你可以
Use an input property setter to intercept and act upon a value from the parent.
使用输入属性设置器拦截来自父级的值并对其进行操作。
Child component:
子组件：
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; }
}
Parent component:
父组件：
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 '];
}
So your code would look like:
所以你的代码看起来像：
@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...
}
}
