如何處理組件內部的角？

Question

也許很簡單的問題，但我一直在尋找了一段時間，我沒有找到如何做這樣的事情在角：

<Parent> 
    <Child1> 
    <Child2> 
</Parent> 

，並定義在父組件的孩子的行爲。那可能嗎 ？

Answer 1

我認爲NG-內容是你博客的todd moto

// my-component.component.ts 
import { Component } from '@angular/core'; 

@Component({ 
selector: 'my-parent-component', 
template: ` 
    <div class="my-parent-component"> 
    <ng-content></ng-content> 
    </div> 
` 
}) 
export class MyComponent {} 

這種方式尋找

的東西可以在主機內部部件的另一個組件（或其他任何東西）

import {Component} from 'angular2/core'; 
import {MyComponent} from './my-component.component'; 
import {MyChildComponent} from './my-component.component'; 
@Component({ 
selector: 'my-app', 
template: ` 
<div class="app"> 
    <my-parent-component> 
    <my-child-component></my-child-component> 
    <my-child-component></my-child-component> 
    </my-parent-component> 
</div> 
`, 
directives: [ 
    MyComponent,MyChildComponent//this is old angular 2.0.0-beta.10 syntax 
] 
}) 
export class AppComponent { 

} 

看到這個plunk

Answer 2

我們可以在<ng-content></ng-content>它的基礎和CSS class -es：
HTML（app.component.html）

<app-new-accordion> 
     <div class="accord-head-1">Header 1</div> 
     <div class="accord-head-2">Header 2</div> 
     <div class="accord-body-1">Content 1</div> 
     <div class="accord-body-2">Content 2</div> 
    </app-new-accordion> 

組件（新accordion.component.ts）

@Component({ 
    selector: 'app-new-accordion', 
    templateUrl: './new-accordion.component.html', 
    styleUrls: ['./new-accordion.component.css'] 
}) 

組件HTML（new-accordion.component.html）

<div> 
    <h2><ng-content select=".accord-head-1"></ng-content></h2> 
    <p><ng-content select=".accord-body-1"></ng-content></p> 
</div> 
<div> 
    <h2><ng-content select=".accord-head-2"></ng-content></h2> 
    <p><ng-content select=".accord-body-2"></ng-content></p> 
</div> 

Answer 3

嘗試https://angular.io/docs/ts/latest/cookbook/component-communication.html。 更多參考 - https://angular.io/docs/ts/latest/api/core/index/ViewChildren-decorator.html - https://angular.io/docs/ts/latest/api/core/index/ViewChild-decorator.html