Можно ли присвоить значение переменной с помощью шаблона компонента angular?

Рассмотрим этот фрагмент:

<div class="col-4" style="text-align: center;">
    <skin-stat-circle>{{statByType('Users')?.count}}</skin-stat-circle><br>
    <span>{{statByType('Users')?.label}}</span>
</div>

Можно ли присвоить statByType('Users') локальной переменной шаблона, как в *ngFor, используя let...?

Изменить

Разобрался с помощью @incaner. Это мощно - очень нравится.

<ng-template #statTemplate let-stat="stat">
   <div class="col-4" *ngIf="stat">
      <skin-stat-circle >{{stat.count}}</skin-stat-circle>
      <br>
      <span>{{stat.label}}</span>
   </div>
</ng-template>
<skin-stat-group>
   <div class="container">
      <div class="row">
         <ng-container *ngTemplateOutlet="statTemplate;context:{stat: statByType('Users')}"></ng-container>
         <ng-container *ngTemplateOutlet="statTemplate;context:{stat: statByType('Projects')}"></ng-container>
         <ng-container *ngTemplateOutlet="statTemplate;context:{stat: statByType('Layers')}"></ng-container>
      </div>
   </div>
</skin-stat-group>

angular angular-template
person jenson-button-event    schedule 14.06.2018    source источник

Ответы (2)


arrow_upward
3
arrow_downward

вы можете попробовать использовать директиву let-*:

<ng-template let-variable="statByType('Users')?.count"> 
  {{variable}}
</ng-template>

а затем просто используйте шаблон.

Если вам нужна дополнительная помощь, прочитайте документы Angular.

person Michel Ferreira Ribeiro    schedule 14.06.2018
comment
Очень интересно, я никогда не слышал об этой директиве. Я искал документы и ничего не мог найти на нем. Знаете ли вы, где находится эта директива в Angular Docs или исходном коде? Мне любопытно узнать об этом больше. Я видел этот пост (stackoverflow.com/questions/44909568/), который снова упоминает об этом, но не дает никакой дополнительной информации - person Narm; 14.06.2018
comment
@Narm добавил ссылку на документы angular. Там не так много можно прочитать. Я думаю, что команда angular добавила директиву let, чтобы мы могли получить нечетное значение и индекс из текущего цикла ngFor. И поскольку вы можете использовать директиву ngFor внутри шаблона ng, обязательно иметь возможность определять переменные внутри шаблона. Я редко использую это, кажется, это не лучшая практика. - person Michel Ferreira Ribeiro; 14.06.2018
comment
Микросинтаксис - очень круто. Я не уверен, что мне когда-нибудь понадобится его использовать, но хорошо знать, что этот вариант существует на случай, если мне когда-нибудь понадобится. Я ценю информацию, спасибо за обновление вашего ответа со ссылкой на документы! - person Narm; 14.06.2018
comment
Я думаю, что это полезно - аргумент был бы в том, почему не новый компонент? Но для такого мелкого отображения нужно только количество html, а контекст настолько локален, что я бы не хотел заканчивать с кучей мелких компонентов, подобных этим. - person jenson-button-event; 15.06.2018

arrow_upward
2
arrow_downward

Разобрался с помощью @incaner. Это мощно - очень нравится.

<ng-template #statTemplate let-stat="stat">
   <div class="col-4" *ngIf="stat">
      <skin-stat-circle >{{stat.count}}</skin-stat-circle>
      <br>
      <span>{{stat.label}}</span>
   </div>
</ng-template>
<skin-stat-group [title]="">
   <div class="container">
      <div class="row">
         <ng-container *ngTemplateOutlet="statTemplate;context:{stat: statByType('Users')}"></ng-container>
         <ng-container *ngTemplateOutlet="statTemplate;context:{stat: statByType('Projects')}"></ng-container>
         <ng-container *ngTemplateOutlet="statTemplate;context:{stat: statByType('Layers')}"></ng-container>
      </div>
   </div>
</skin-stat-group>
person jenson-button-event    schedule 14.06.2018
comment
Я думаю, что для будущих парней было бы полезно, если бы вы добавили это как редактирование в свой вопрос. - person Michel Ferreira Ribeiro; 14.06.2018