为每个 ng 模板添加标签

Question

我正在尝试为我的每个ng-template添加标签或名称，然后将该标签保存在property中，但我不确定如何做到这一点。

我想这样做是因为，我希望在迭代ng-template列表时，每个ng-template都与正确的标签相关联。

注意事项：我正在创建一个可重用的选项卡组件。Tab 组件将保存逻辑，父组件将保存ng-template，因为只有父组件知道它将需要哪种模板。

每个ng-template都需要一个标签来配合它。

试：我尝试将name = "Label 2"添加到ng-template但我认为这没有任何作用。

 <ng-template #temp1 name="Label 2"> <p>this is template 2</p> </ng-template>

目标：我想用这样的object填充我的templates属性。

let templates = {tempLabel: 'Label 2', template: 'temp1'}

我已经得到了template: temp1部分，我只需要对象的tempLabel: 'Label 2部分。

Answer 1

您可以创建自定义指令来存储标签和模板本身，如下所示：

@Directive({
  selector: '[appLabel]'
})
export class LabelDirective {
  constructor(public templateRef: TemplateRef<any>) { }
  @Input('appLabel') label = '';
}

并将其注入组件中：

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  @ViewChildren(LabelDirective) templates: QueryList<LabelDirective> 
}

下面是应用组件模板：

<ng-template appLabel="label 1"></ng-template>
<ng-template appLabel="label 2"></ng-template>
<ng-template appLabel="label 3"></ng-template>
<ul>
    <li *ngFor="let t of templates">{{t.label}} - {{ t.templateRef }}</li>
</ul>

这是工作示例 https://stackblitz.com/edit/angular-w8sd4y