如何處理組件內部成角度的組件？

Question

也許這是一個簡單的問題，但我已經搜索了一段時間，但找不到在angular中如何執行以下操作：

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

並在父組件中定義子代的行為。 那可能嗎 ？

Answer 1

我們可以將其基於<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>

組件（new-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 2

嘗試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

Answer 3

我認為ng-content是您要尋找的東西

來自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 {

 }

看到這pl