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

debugcn 发表于 Dev

米格尔·莫拉

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

jo_va

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

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

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

通过@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>

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。