Angular中如何通过SCSS嵌套选择器控制外部error元素可见性？

方案1：利用表单控件状态直接控制（最简洁） #

如果自定义组件已实现ControlValueAccessor并绑定到FormControl，直接通过父组件的表单控件状态控制error div的显示，无需操作组件内部元素：

父组件HTML：

<div class="account">
  <app-hierarchyaccounts-ng-select [formControl]="hierarchyControl"></app-hierarchyaccounts-ng-select>
  <div id="error" *ngIf="hierarchyControl.invalid && hierarchyControl.touched">
    请选择有效的层级账户
  </div>
</div>

表单控件的touched状态会自动同步组件内部ng-select的触摸状态，invalid状态由表单验证规则决定，直接用这两个状态就能精准控制错误提示的显示。

方案2：暴露组件内部ng-select实例（适合需直接操作内部控件的场景） #

如果必须依赖内部ng-select的状态，可在自定义组件中暴露ng-select实例，父组件通过模板变量获取状态：

1. 自定义组件TS：

import { Component, ViewChild } from '@angular/core';
import { NgSelectComponent } from '@ng-select/ng-select';

@Component({
  selector: 'app-hierarchyaccounts-ng-select',
  templateUrl: './hierarchyaccounts-ng-select.component.html',
  styleUrls: ['./hierarchyaccounts-ng-select.component.scss']
})
export class HierarchyaccountsNgSelectComponent {
  @ViewChild(NgSelectComponent) ngSelect!: NgSelectComponent;
}

2. 父组件HTML：

<div class="account">
  <app-hierarchyaccounts-ng-select #hierarchySelect [formControl]="hierarchyControl"></app-hierarchyaccounts-ng-select>
  <div id="error" *ngIf="hierarchyControl.invalid && hierarchySelect.ngSelect.touched">
    请选择有效的层级账户
  </div>
</div>

方案3：CSS兄弟选择器结合组件状态类（纯样式方案） #

通过自定义组件内部的样式逻辑，在ng-select被触摸时给宿主组件添加状态类，再用父组件的CSS兄弟选择器控制error div：

1. 自定义组件SCSS：

:host {
  display: block;
}

// 你的现有ng-select样式
::ng-deep .ng-select.ng-touched {
  border-color: #dc3545;
}

// 当内部ng-select被触摸时，给宿主组件添加.is-touched类
::ng-deep .ng-select.ng-touched {
  @at-root :host {
    &.is-touched {
      // 仅标记状态，无额外样式
    }
  }
}

2. 父组件SCSS：

.account {
  #error {
    display: none;
    color: #dc3545;
    margin-top: 0.25rem;
  }

  // 当组件同时有.ng-invalid和.is-touched类时，显示error div
  app-hierarchyaccounts-ng-select.ng-invalid.is-touched + #error {
    display: block;
  }
}

内容的提问来源于stack exchange，提问作者Srinivas Teella