时间戳

首页 > 解决方案 > 带有选择的 ngContent 的 ContentChildren

angular - 带有选择的 ngContent 的 ContentChildren

问题描述

我正在尝试制作一些自定义字段：

<app-form-field class="col-12 col-lg-6">
  <div formLabel>{{ 'i18n.Field.FirstName.Name' | translate }}</div>
  <app-input
    formInput
    required
  ></app-input>
  <div formError *ngIf="true" class="error-feedback">
    <small *ngIf="true">{{ 'i18n.Field.FirstName.Error.Required' | translate }}</small>
  </div>
</app-form-field>

现在我可以在我的中执行此操作以app-form-field在不同位置显示内容：

<ng-content select="[formErrors]"></ng-content>

但我也想在我的代码中获得该内容的参考：

我试过了

@ContentChild('formError') formError: HTMLElement;

  ngAfterContentInit(): void {
      console.log(this.formError);
  }

但它不起作用。

我知道我可以发出指令，但如果可能的话，我想尝试一下。

标签： angular

解决方案

我认为您应该将 formError 声明为模板变量“#formError”

<app-form-field class="col-12 col-lg-6">
  <div formLabel>{{ 'i18n.Field.FirstName.Name' | translate }}</div>
  <app-input
    formInput
    required
  ></app-input>
  <div ( here --->) #formError *ngIf="true" class="error-feedback">
    <small *ngIf="true">{{ 'i18n.Field.FirstName.Error.Required' | translate }}</small>
  </div>
</app-form-field>

推荐阅读