Angular组件中的嵌套输入组

时间:2019-10-21 07:52:44

标签: angular twitter-bootstrap bootstrap-4 angular-bootstrap

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

docker build -t test --build-arg var_env="New Env Value" .

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,结果是我拥有一个控件,它不使用整个空间,而只使用一半。如果删除datepicker组件中的输入组,问题是我的按钮与文本框不对齐。 enter image description here

enter image description here

我该如何解决这类问题?

更新23.10.2019

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

2 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

<hello>组件中添加了两件事

    input-group-append所需的
  • class ='form-control'
  • style='padding:0px',因为此填充会将输入内容稍微放在外面

相关的 app.component.html

<p>
    Sample for boostrap nested input-group
</p>
<div class="row form-group form-group-sm">
    <div class="col-md-12">
        simple input box - works !
    <div class="input-group input-group-sm">  
            <input type="number" class="form-control" placeholder="">
            <div class="input-group-append" #ref>
                <span class="input-group-text" >Unit</span>
                <span class="input-group-text">
          <span class="help">
            Help
          </span>
                </span>
            </div>
            <div class="input-group-append" #ref>
                <ng-content></ng-content>
            </div>
        </div>
    </div>

    <div class="col-md-12">
    Only my custom component - works !
        <hello name="{{ name }}"></hello>
    </div>

    <div class="col-md-12">
    My custom component in a input-group - fails !
<div class="input-group input-group-sm">
            <hello name="{{ name }}" class='form-control' style='padding:0px' ></hello>
            <div class="input-group-append" #ref>
                <span class="input-group-text" >Unit</span>
                <span class="input-group-text">
          <span class="help">
            Help
          </span>
                </span>
            </div>
            <div class="input-group-append" #ref>
                <ng-content></ng-content>
            </div>
        </div>
    </div>
</div>

完成working stackblitz here