时间戳

首页 > 解决方案 > Angular 父表单控件 Bootstrap / CSS 不适用于子组件

css - Angular 父表单控件 Bootstrap / CSS 不适用于子组件

问题描述

我创建了一个在父级中使用的自动完成子组件。在父级中，当尝试使用 Bootstrap 表单控件应用验证时，它不会应用于此子组件 - 这是一个带有列表的输入框，尽管它会应用于其他非子控件。

子组件 HTML：

<div class="searching">
  <input type="text" class="form-control"  (input)="getFilteredData(inputBox.value);" class="form-control"  [formControl]="inputBox">
  <div id="search" tabindex="0" >
    <ul class="suggestionList">
      <li  *ngFor="let result of filteredResults | async" (click)="onUserSelected(result)" >{{result[displayField1]}} | {{result[displayField2]}} {{result[displayField3]}}</li>
    </ul>
  </div>
</div>

父组件：

<app-auto-complete formControlName="requestorId" 
                     [ngClass]="{ 'is-invalid': submitted && 
                     requestorId.errors }"></app-auto-complete>
                  <div *ngIf="submitted && f.requestorId.errors" class="invalid-feedback">
                      <div *ngIf="f.requestorId.errors.required">Requestor ID is required</div>
                  </div>

子 CSS：

.searching {
  width: inherit;
    position: relative;
}
      .searching input {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 30px;
      }
      .suggestionList {
        background-color: #fff;
        width: 100%;
        position: absolute;
        padding: 0;
        left: 0;
        z-index: 1000;
      }
      .suggestionList li {
        list-style-type: none;
        border: 1px solid #c5c5c5;
        cursor: pointer;
        left: 0;
        font-family: Arial,Helvetica,sans-serif;
        font-size: 1em;
        text-align: left;
      }

标签： cssangularbootstrap-4

解决方案

我有几个workaraounds，所以我希望任何帮助。

如评论中所述，使用 ViewEncapsulation.None 在您的父组件装饰器中添加属性“封装”（与“选择器”等相同的级别）。请注意，这种方法会使父组件的样式渗透到整个应用程序，所以要小心这样做，除非您的父选择器非常具体，例如.my-specific-parent-selector-which-isnt-gonna-be-repeated

在子组件上使用@Input 属性传递验证布尔值，并根据传递的输入直接应用类。

向父类添加一个.parent-selector .is-invalid选择器，然后在其后面添加一个::ng-deep .parent-selector .is-invalid使特定样式渗透到子类的内容。请注意这种方法已被弃用，因此它可能会在未来停止工作（尽管不太可能）

注意：还请注意，您正在将is-invalid类应用于选择器..如果您使用 chrome 网络浏览器进行检查，您会发现此选择器通常是您尝试添加类的不同元素...所以也许您最好的方法是使用输入

推荐阅读