我想使用 Inputs 制作一个 Angular2 组件链。来自 app > parent > child 的简单示例链。在应用程序中的位置设置了在运行时在子项中设置的实习生数据。下面的代码相同。
------------ app.component.ts ---------
import {Component} from 'angular2/core';
import {ParentComponent} from './parent.component';
@Component({
selector:'componentchain-tag',
template: `<h1>Level 0</h1>
<p><parent-tag [fromapp] = "From Level 0" ></parent-tag>
`,
directives: [ParentComponent]
})
export class AppComponent {
fromapp: string;
}
------------- parent.component.ts ----------------
import {Component,Input} from 'angular2/core';
import {Child1Component} from './child1.component';
@Component({
selector:'parent-tag',
template: `<h1>Level 1</h1>
<p><child1-tag [child1value] = {{fromapp}} ></child1-tag>
`,
directives: [Child1Component]
})
export class ParentComponent {
@Input() fromapp: string;
child1value: string;
constructor(){
}
}
--------------- child1.component.ts ---------
import {Component,Input} from 'angular2/core';
@Component({
selector: 'child1-tag',
template: `<h1>Level 3-1</h1>
This is Child1
<p>This is variable from {{child1value}}
`
})
export class Child1Component {
@Input() child1value: string;
}
在 parent.component.ts 中尝试使用{{fromapp}}
,例如保存临时变量等,但它不起作用。我收到错误说 inparent.component
fromapp
未定义。
如何做组件的多链,它的基础对吗?