获取传入 Angular2 Component 的数据

Question

我有一个带有模板的组件：

<some-component>
  <div>some stuff </div>
</some-component>

如何获取传入组件的数据并将它们推送到模板中的某个位置？

Answer 1

你可以使用 <ng-content></ng-content> 来实现同样的效果。

在 some-component 中像这样使用 ng-content :-

@Component({
    selector: 'some-component',
    template: `left <ng-content></ng-content> right`,
})
class SomeComponent {}

@Component({
    selector: 'my-app',
    template: `<some-component>INSERTED</some-component>`,
    directives: [some-component],
})
class MyApp {}

基本上，<ng-content></ng-content> 就像从 Angular 1.

中嵌入

您还可以通过使用命名的 ng-content 在单个组件中使用多个 ng-content 像这样：-

<child-select>
    <section>Section Content</section>
    <div class="class-select">
      div with .class-select
    </div>
    <footer>Footer Content</footer>
    <header>Header Content</header>
  </child-select>

为了在 child-select 组件中使用它，您必须在模板中指定如下：-

    <div style="border: 2px solid red; padding: 1rem; margin: 2px;">
        <h4>Child Component with Select</h4>
        <div style="border: 2px solid orange; padding: 1rem; margin: 2px">
          <ng-content select="header"></ng-content>
        </div>
        <div style="border: 2px solid green; padding: 1rem; margin: 2px">
          <ng-content select="section"></ng-content>
        </div>
        <div style="border: 2px solid pink; padding: 1rem; margin: 2px">
          <ng-content select=".class-select"></ng-content>
        </div>
        <div style="border: 2px solid purple; padding: 1rem; margin: 2px">
          <ng-content select="footer"></ng-content>
        </div>
    </div>

这里正在工作 plnker Working Plunker

获取传入 Angular2 Component 的数据

Get data passed into Angular2 Component

angular2-template

angular