如何处理组件内部的角？

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