Можно ли получить доступ к переменной компонента при использовании компонента?

Question

У меня есть 7-компонентный шаблон Angular следующим образом:

<div class="measure">
  <ng-content select="[label]"></ng-content>
  <div class="chart">
    <div class="state" [style.width.%]="progress">&nbsp;</div>
  </div>
  <ng-content select="[value]"></ng-content>
</div>

Как видите, progress - это переменная в этом компоненте:

export class ProgressComponent implements OnInit {

  @Input() current: any;
  @Input() maximum: any;
  @Input() minimum: any;

  progress: number;

  ngOnInit() {
    // Some code
  }
}

Есть ли способиспользуйте переменную progress при использовании компонента:

<mk-progress [minimum]="0" [maximum]="100" [current]="50" class="test">

  <span label>Label</span>

  <span value>{{progress}}%</span>

</mk-progress>

Я пытаюсь использовать его в строке кода:

 <span value>{{progress}}%</span>

Answer 1

Это невозможно при использовании <ng-content>.Однако вы можете достичь этого с помощью проецирования шаблонов вместо обычного содержимого.

Затем ваш компонент будет отображать эти шаблоны вместо ng-content через <ng-container>, помеченные ngTemplateOutletи установите контекст для этих шаблонов.

Используя структурные директивы (добавляя * перед вашей директивой), вы эффективно оборачиваете свой внедренный контент шаблонами.

Используя @ContentChild в вашем компоненте, вы можете затем ссылаться на эти шаблоны для их создания.

Чтобы получить доступ к контексту шаблона при использовании вашего компонента, вы можете использовать ключевое слово let в шаблоне для псевдонима implicit context и затем ссылку на него.

<div class="measure">
    <ng-container *ngTemplateOutlet="labelTemplate; context: templateContext"></ng-container>
    <div class="chart">
        <div class="state" [style.width.%]="progress">&nbsp;</div>
    </div>
    <ng-container *ngTemplateOutlet="valueTemplate; context: templateContext"></ng-container>
</div>

export class ProgressComponent implements OnInit {
    @Input() current: any;
    @Input() maximum: any;
    @Input() minimum: any;

    @ContentChild(LabelDirective, { read: TemplateRef }) labelTemplate;
    @ContentChild(ValueDirective, { read: TemplateRef }) valueTemplate;

    progress: number;

    templateContext = { $implicit: this };

    ngOnInit() {
        // Some code
    }
}

<mk-progress [minimum]="0" [maximum]="100" [current]="50" class="test">
  <span *label>Label</span>
  <span *value="let item">{{ item.progress }}%</span>
</mk-progress>

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

<ng-container *ngTemplateOutlet="valueTemplate ? valueTemplate : defaultTemplate; context: templateContext">
</ng-container>
<ng-template #defaultTemplate>
  default thing to show
</ng-template>

См. это артикул для более подробной информации.