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

Question

我有一个 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>

Answer 1

使用 <ng-content> 无法做到这一点。但是，您可以通过 投影模板 而不是常规内容来实现。

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

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

通过在您的组件中使用 @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>

有关详细信息，请参阅此 article。

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

Is it possible to access component variable when using component?

angular

angular6

angular7