Question

我想使用输入来创建Angular2组件链。来自app的简单示例链＆gt;父母＆gt;孩子。应用程序中的位置设置在运行时在子节点中设置实习的数据。下面的代码。

------------ 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}}，比如保存临时变量等，但它不起作用。我在parent.component fromapp中没有定义错误。

如何进行组件的多链接，其基础知识对不对？

Answer 1

这是无效的

<p><child1-tag [child1value] = {{fromapp}} ></child1-tag>

应该是

<p><child1-tag [child1value]="fromapp"></child1-tag>

{{}}字符串化值
{{}}无法与[]，()或* xxx（例如*ngFor）

Answer 2

以下是解决问题的方法

  <parent-tag fromappforchild1 = "From Level 0-Child1" fromappforchild2 = "FromLevel 0-Child2" ></parent-tag>

详细信息文件

https://angular.io/docs/ts/latest/api/core/Input-var.html

仍然不清楚在父标签内部做什么，如何控制。例如，在我的app.component.ts中，如果我有templevel0 =＆＃34; test＆＃34; ，我不能把它放在父标签内..

Angular2组件输入链

2 个答案: