0

我正在 Angular 9 中创建一组定制的表单组件。其中一个是 Account Dropdown，它在其模板中使用另一个组件 Dropdown List。下拉列表组件已经具有使用内容投影 (ng-content) 将在其实例化标记中找到的任何消息组件显示为错误消息的逻辑。我想要做的是在帐户下拉列表（祖父）中实例化一个消息组件（子），如下所示，但在下拉列表（父）中呈现消息的 html。

应用程序 HTML：

   <b-account-dropdown formControlName="account">
    <b-account-dropdown-label>Error</b-account-dropdown-label>
    <b-account-item
       ...props
    ></b-account-item>
    <b-account-item
       ...props
    ></b-account-item>
    <b-account-item
       ...props
    ></b-account-item>
    <b-message [error]="true">
      <strong>Error:</strong>
      Ooops, it looks like something has gone wrong.
    </b-message>
  </b-account-dropdown>

account-dropdown.component.html

<b-dropdown-list
  [showIndicators]="true"
  [placeholder]="placeholder"
  [scrollable]="scrollable"
>
  <b-dropdown-list-label>
    <ng-content select="b-account-dropdown-label"></ng-content>
  </b-dropdown-list-label>
  <ng-container ngProjectAs="b-tooltip-icon">
    <ng-content select="b-tooltip-icon"></ng-content>
  </ng-container>
  <b-dropdown-list-option
    *ngFor="let item of items"
    [value]="item.value"
    [disabled]="item.disabled"
    ></b-dropdown-list-option> 
</b-dropdown-list>

下拉列表.component.html

    <!-- HTML FOR DROPDOWN HERE -->

    <div *ngIf="messages.length">
      <ng-content select="b-message"></ng-content>      
    </div>

有谁知道这是否或如何可能？

谢谢

4

0 回答 0