Question

我正在尝试为ng-template的每个添加标签或名称，然后保存该标签放在property中，我不确定该怎么做。

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

注意： 我正在创建一个可重用的Tab组件。 Tab组件将容纳逻辑，而Parent组件将容纳ng-template，因为只有父组件知道它将需要哪种模板。

每个ng-template都需要一个标签标签。

尝试过： 我曾尝试将name = "Label 2"添加到ng-template，但我认为这没有做任何事情。

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

目标：我想用templates来填充object属性。

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

这是AppComponent模板：

<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

为每个ng模板添加标签

1 个答案: