angular - Angular 组件中的嵌套输入组

Question

我已经以角度创建了一个输入组件和一个 datepicker 组件。我的输入组件在类型参数的基础上创建文本的正确输入标签，数字 ecc。对于日期选择器，我创建了另一个托管 ngb-datepicker 的组件。输入组件：

    <div class="input-group input-group-sm">
    <ng-container [ngSwitch]="type">
      <ng-container *ngSwitchCase="'date'">        
        <app-date-picker [id]="object.id" [name]="object.id" [disabled]="disabled" (focus)="focus()" (focusout)="focusout()" [(ngModel)]="value"></app-date-picker>
      </ng-container>
<div class="input-group-append" #ref>
  <span *ngIf="unit" class="input-group-text" [ngClass]="{
    'disabled': disabled, 
    'focused': focused}">{{unit}}</span>
  <span class="input-group-text" [ngClass]="{'focused': focused}" *ngIf="!disabled && !readonly && !isValidationOff">
    <app-quality-status #qualityStatus [objects]="[object]" [hide]="hideQualityStatus"></app-quality-status>
  </span>
</div>

<div class="input-group-append" #ref>
  <ng-content></ng-content>
</div>

日期选择器组件：

    <div class="input-group input-group-sm">
  <input class="form-control" name="dp" [(ngModel)]="selectedDate" ngbDatepicker #d="ngbDatepicker" (change)="onDateChange($event.target.value)" (dateSelect)="onDateSelect($event)" [disabled]="isDisabled ? 'disabled' : null">
  <div class="input-group-append">
    <button class="btn btn-input calendar fa fa-calendar" (click)="d.toggle()" type="button" [disabled]="isDisabled ? 'disabled' : null"></button>
  </div>
</div>

使用这个嵌套的输入组 div，结果是我有一个不使用整个空间而只使用一半的控件。如果我删除 datepicker 组件中的输入组，问题是我的按钮与文本框不对齐。

我该如何解决这种问题？

更新 23.10.2019

这是我的 stackblitz 示例 https://stackblitz.com/edit/angular-pbabtg

标签： angulartwitter-bootstrapbootstrap-4angular-bootstrap

Answer 1

尝试将以下css添加到hello.component

:host {
  display: flex;
  flex: auto;
}