Question

也许这是一个简单的问题，但我一直在寻找一段时间而且我没有找到如何以角度做这样的事情：

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

 }

请参阅此plunk

如何处理角度内的组件内的组件？

3 个答案: