angular2 - связь между компонентами

Question

Я ищу о связи между компонентами с Angular2, но то, что мне нужно, немного отличается. У меня есть структура вроде этого:

Отец -> Сын -> Сын

Мой код выглядит следующим образом

отца Компонент:

@Component({ 
selector: 'app', 
templateUrl: './instituicao/components/instituicao.html', 
directives: [InstituicaoForm, InstituicaoList] 
}) 

export class InstituicaoCmp {} 

Мой instituicao.html

<instituicao-form> 
    <div class="row"> 
     <instituicao-list></instituicao-list> 
    </div> 
</instituicao-form> 

У меня только есть форма на <instituicao-form>, что я муравей для заполнения, когда пользователь нажимает на какой-то элемента списка таблицы из <instituicao-list> Что-то вроде этого в <instituicao-list>:

<tr role="row" *ngFor="#item of items | instituicaoPipe : searchItems"> 
      <td>{{item.id.idInstituicao}}</td> 
      <td>{{item.descInstituicao}}</td> 
      <td> 
      <button class="btn btn-link" (click)="HERE I WANT TO POPULATE FORM AT INSTITUICAO-FORM COMPONENT(item)"> Editar</button> 
      </td> 
     </tr> 

Моя Instituição форма HTML это просто форма с некоторыми полями, как <input type="text" [(ngModel)]="item.idInstituicao"

я только мог сделать это с использованием ng-модели на <instituicao-form> и положить мой список на <instituicao-form> тоже.

Пожалуйста, кто-нибудь может мне помочь?

Answer 1

Из Вашего вопроса я предполагаю, что вы хотите что-то вроде этого:

@Component({ 
    selector: 'app', 
    directives: [InstituicaoForm, InstituicaoList], 
    template: ` 
    <instituicao-form #form> 
    <div class="row"> 
     <instituicao-list (selectionChanged)="#form.update($event)></instituicao-list> 
    </div> 
    </instituicao-form>`, 
}) 
export class InstituicaoCmp { 
} 

@Component({ 
    selector: 'instituicao-list', 
    template: ` 
    <tr role="row" *ngFor="#item of items | instituicaoPipe : searchItems"> 
     <td>{{item.id.idInstituicao}}</td> 
     <td>{{item.descInstituicao}}</td> 
     <td> 
     <button class="btn btn-link" (click)="select(item)"> Editar</button> 
     </td> 
    </tr>`, 
}) 
export class InstituicaoList { 
    var items; 
    @Output() selectionChanged: EventEmitter = new EventEmitter(); 
    select(item) { 
    this.selectionChanged.emit(item); 
    } 
} 

@Component({ 
    selector: 'instituicao-form', 
    template: ` 
<form> 
    ... 
</form>`, 
}) 
export class InstituicaoForm { 
    var item; 
    update(value) { 
    this.item = value; 
    } 
} 

Не испытанный