Входная цепочка компонентов Angular2

Я хотел создать цепочку компонентов Angular2, используя Inputs.A простая примерная цепочка из 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}}, вроде сохранения во временной переменной и так далее, но это не работает. Я получаю сообщение об ошибке в parent.component fromapp не определено.

Как сделать мультицепочку компонентов, ее основы правильно?


person rajesk    schedule 03.06.2016    source источник
comment
еще одно обновление {{fromapp}} не может быть передано, если мы не создадим индивидуальную производную версию. Литературы по этому поводу не так много.   -  person rajesk    schedule 04.06.2016


Ответы (2)


Это недействительно

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

должен быть

<p><child1-tag [child1value]="fromapp"></child1-tag>
  • {{}} упорядочивает значение
  • {{}} нельзя сочетать с [], () или *xxx (например, *ngFor)
person Günter Zöchbauer    schedule 04.06.2016
comment
Спасибо @günter-zöchbauer, это работает. Чтобы добавить к этому, если у меня есть второй дочерний компонент. Как передать два значения из приложения, которые будут получены соответствующими дочерними элементами. Итак, внутри app.component.ts что-то вроде этого ‹parent-tag [fromappforchild1, fromappforchild2] = {From Level 0-Child1, FromLevel 0-Child2} ›‹/parent-tag› - person rajesk; 05.06.2016
comment
<parent-tag меня немного смущает. Вы передаете данные от родителя к дочернему, используя привязки. Это будет выглядеть так: ‹child-tag [inputInChild1]=propertyInParent1 [inputInChild2]=propertyInParent2›‹/child-tag›` - person Günter Zöchbauer; 05.06.2016

Вот как это решить

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

Подробный документ здесь

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

До сих пор не понятно, что делать внутри parent-tag, как контролировать. Например, в моем app.component.ts, если у меня есть Templevel0 = "test" , я вообще не могу поместить его в родительский тег.

person rajesk    schedule 05.06.2016