Angular中能否结合自定义结构指令实现条件样式？

你原来的代码报错，核心原因是不能把结构指令*someDirective直接放进[ngClass]的表达式里。*someDirective是Angular的结构指令语法，作用是控制DOM元素的渲染/移除，它本身不是一个可求值的布尔变量，自然没法在条件表达式里使用。

下面给你几种可行的实现方式：

方式一：直接基于业务条件判断（最常用） #

既然*someDirective已经控制了div的显示，那只有当指令满足条件时，这个div才会出现在DOM中。此时你只需要针对业务条件SelectedProductId !== 0来设置样式就行，完全不需要考虑指令的状态：

<div *someDirective [ngClass]="SelectedProductId !== 0 ? 'w-23' : 'w-30'">

因为只有div被渲染出来的时候，[ngClass]才会生效，这时候直接判断你的业务变量就足够了。

方式二：结合指令内部条件（指令可修改时） #

如果你的someDirective内部有独立的判断逻辑，且需要把这个逻辑和业务条件结合，可以修改自定义指令，暴露一个状态属性：

// 自定义指令代码
@Directive({
  selector: '[someDirective]'
})
export class SomeDirective {
  // 暴露指令是否激活的状态
  isDirectiveActive = false;

  constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) {
    // 这里是你指令原来的判断逻辑
    const shouldShow = /* 你的条件判断 */;
    if (shouldShow) {
      this.viewContainer.createEmbeddedView(this.templateRef);
      this.isDirectiveActive = true;
    } else {
      this.viewContainer.clear();
      this.isDirectiveActive = false;
    }
  }
}

然后在组件中通过@ViewChild获取指令实例：

// 组件代码
import { ViewChild } from '@angular/core';
import { SomeDirective } from './some.directive';

@Component({
  // ...组件元数据
})
export class YourComponent {
  @ViewChild(SomeDirective) someDirective!: SomeDirective;
  SelectedProductId = 0;
}

最后在模板中结合两个条件：

<div *someDirective [ngClass]="SelectedProductId !== 0 && someDirective.isDirectiveActive ? 'w-23' : 'w-30'">

不过实际上，当*someDirective生效时，isDirectiveActive必然是true，所以这种情况大多可以简化成方式一的写法，除非有特殊场景需要同时校验两个条件。

方式三：用ng-container拆分逻辑 #

如果想更清晰地分离结构控制和样式控制，可以用ng-container包裹结构指令，在内部div上单独设置样式：

<ng-container *someDirective>
  <div [ngClass]="SelectedProductId !== 0 ? 'w-23' : 'w-30'">
    <!-- 内容 -->
  </div>
</ng-container>

这种写法把DOM渲染控制和样式逻辑完全分开，结构更清晰，适合复杂场景。

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