角父窗体控件Bootstrap / CSS不适用于子组件

Question

I created a autocomplete child component that I am using in parent. In parent when try to apply the validation using Bootstrap form-control it's not getting applied to this child component - which is an input box with a list, although it's getting applied to other controls which are not child.

Child component 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>

Parent component:

<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>

Child 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;
      }

Answer 1

I have several workaraounds in mind, so I hope any helps.

As mentioned in the comments, add in your parent component decorator the property 'encapsulation' (same level as 'selector' and such) with ViewEncapsulation.None. Be aware that this approach makes styles of the parent component penetrate the whole app, so be wary with doing this unless you have the parent selector be really specific such as .my-specific-parent-selector-which-isnt-gonna-be-repeated

use @Input property on child component to pass the validation boolean, and apply the class directly according to the Input passed.

add a .parent-selector .is-invalid selector to parent, and then add behind it a ::ng-deep .parent-selector .is-invalid making that specific styling penetrate child classes. Be wary that this approach is deprecated though, so it might stop working in the future (although unlikely)

Note: also note that you are applying the is-invalid class to a selector.. if you inspect with chrome web browser you will see that this selector usually is a different element that where you try to add your class... so maybe your best approach is using inputs