Question

我正在努力理解翻译，并想出了这一点 dynamic content can be projected into <ng-content> block。我认为这是基本的想法。

我关注how to build tabs component in Angular 2+。 https://blog.thoughtram.io/angular/2015/04/09/developing-a-tabs-component-in-angular-2.html

有一些基本的疑问需要澄清。

所以，在app组件的template：

中

  template:`
          <tabs>
            <tab tabTitle="Tab 1" >Tab 1 Content</tab>
            <tab tabTitle="Tab 2">Tab 2 Content</tab>
          </tabs>
          `

因此，Tabs组件中的Tab组件和每个标签组件都有一些数据内容，我猜这些内容需要作为ng-content进行投影。

现在，在标签组件中，template看起来像：

  template:`
          <div [hidden]="!active" class="pane">
            <ng-content></ng-content>
          </div>
          `

这是可以理解的。我不清楚的是，Tabs Component看起来如何：

@Component({
  selector: 'app-tabs',
    template:`
            <ul class="nav nav-tabs">
              <li *ngFor="let tab of tabComponents">{{tab.title}}</li>
            </ul>
            <ng-content></ng-content>
            `
})
export class TabsComponent implements OnInit,AfterContentInit {
  @ContentChildren(TabComponent) tabComponents:QueryList<TabComponent>;

为什么 <ng-content></ng-content> 需要在这里使用？ 动态内容位于标签组件内，因此标签模板中的 <ng-content></ng-content> 是有道理的，为什么它在那里标签组件的模板？

请澄清基础知识。

如何在Angular4中使用transclusion

0 个答案: