时间戳

首页 > 解决方案 > 使用组件时是否可以访问组件变量？

angular - 使用组件时是否可以访问组件变量？

问题描述

我有一个 Angular 的 7 个组件模板，如下所示：

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

标签： angularangular6angular7

解决方案

这是不可能的<ng-content>。但是，您可以通过投影模板而不是常规内容来实现它。

然后，您的组件将呈现这些模板，而不是ng-contentvia <ng-container>，ngTemplateOutlet并为这些模板设置上下文。

通过使用结构指令（*在指令前添加一个），您可以有效地将注入的内容与模板包装起来。

通过@ContentChild在您的组件中使用，您可以引用这些模板来实例化它们。

为了在使用组件时访问模板上下文，您可以使用let模板上的关键字为implicit上下文设置别名，然后引用它。

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

有关更多详细信息，请参阅本文。

推荐阅读