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>无法做到这一点。但是，您可以通过投影模板而不是常规内容来实现。

然后，您的组件将通过标有ng-content的{{1}}来呈现这些模板，而不是<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>

有关更多详细信息，请参见此article。

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

1 个答案: