Question

我正在为基础css框架编写角度组件。我正在处理标签组件，并希望能够将一些HTML传递给<ng-content>。

问题是，我还需要传递用户可以绑定的html，如下所示：

父母模板

<tabs [data]='example'>
    <div> Age <br> {{item.age}} </div>`
</tabs>

TABS COMPONENT

<ul class="tabs" #tabs>
  <li *ngFor="let item of data | async" (click)="tabClick($event)">
      <a>{{item.name}}</a>
  </li>
</ul>
<div>
  <ng-content></ng-content>
</div>

TABS TYPESCRIPT

@Component({
  selector: 'tabs',
  templateUrl: './tabs.component.html'
})

export class TabsComponent {
  @Input('data') data:any;
  @ViewChild('tabs') tabs: ElementRef;
}

item是对example数组中对象的引用。

但是，我收到此错误： Cannot read property 'name' of undefined 因为item在插入<ng-content>指令之前正在进行评估。

有没有办法解决这个限制，或者我是以错误的方式解决这个问题？

Answer 1

更新Angular 5

ngOutletContext已重命名为ngTemplateOutletContext

另见https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

<强>原始

ngTemplateOutlet或ngForTemplate可用于该用例：

<tabs [data]='example'>
  <ng-template let-item>
    <div> Age <br> {{item.age}} </div>`
  </ng-template>
</tabs>

@Component({
  ...
  template: `
    <ul class="tabs" #tabs>
      <li *ngFor="let item of data | async" (click)="tabClick($event)">
          <a>{{item.name}}</a>
      </li>
    </ul>
    <div>
      <ng-template [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{$implicit: (data | async)}"></ng-template>
    </div>
  `
})
class TabsComponent {
  @ContentChild(TemplateRef) templateRef:TemplateRef;
}

另见Angular 2 bind transcluded content to loop variable

Answer 2

你应该使用这种方式，

<tabs [data]='example'>
    <div> Age <br> {{item.age}} </div>`
</tabs>

组件打字稿

@Component({
  selector: 'tabs',
  templateUrl: './tabs.component.html'
})

export class TabsComponent {
  @Input() data:any;
  item:any{};
}

在您的内容投影中，将选择器定义为

 <div class="tabs-body">
        <ng-content select=".tabs-body"> </ng-content>
      </div>

当您传递绑定

时

<tabs [data]='example'>
    <div> Age <br> {{item.age}} </div>`
</tabs>

<强> DEMO

Answer 3

您需要将item对象传递给ng-content组件。

<ng-content [item]="selectedTab></ng-content>

我不确定标签点击事件背后的内容，但您可以将该项目对象分配给将传递给组件的selectedTab。

将控制选项卡视图的组件可以包含以下内容：

@Input() item: Item;

点击时会传递该对象。我可能会从错误的角度攻击这个，但也许它会以某种方式帮助你。

Angular 2通过绑定将html传递给ng-content

3 个答案: