Добавьте метки к каждому ng-шаблону - PullRequest
Новая
       21

Добавьте метки к каждому ng-шаблону

0 голосов
/ 18 июня 2019

Я пытаюсь добавить Ярлыки или Имена для каждого моего ng-template, а затем сохранить эту метку в property и я не уверен, как это сделать.

Я хотел бы сделать это, потому что я хочу, чтобы каждый ng-template ассоциировался с правильной Меткой , когда список ng-template s повторяется.

На заметку: Я создаю повторно используемый компонент Tab. Компонент Tab будет содержать логику, а компонент Parent - ng-template s, поскольку только родитель знает, какие шаблоны ему понадобятся.

И каждый 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 часть объекта.

1 Ответ

0 голосов
/ 19 июня 2019

Вы можете создать собственную директиву, в которой будут храниться метка и сам шаблон, например: 

@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

...