基于NGRX展示消息的最优方案及模板CSS类设置咨询

嘿，你已经探索了两种NGRX消息展示的方式，我来分享几个实用的替代方案，以及解决CSS重复问题的办法，帮你实现更简洁的代码～

一、NGRX消息展示的其他可行方案 #

1. Effect + 全局消息服务组合 #

这个方案不用在状态里存消息，而是通过Effect监听消息相关的Action，然后调用全局服务触发展示：

• 首先创建一个MessageService，里面封装展示Toast/Snackbar的方法（比如调用Angular Material的MatSnackBar）；
• 编写Effect，监听ShowMessage这类Action，在Effect的处理函数里调用MessageService的展示方法；
• 业务组件只需要dispatch对应的Action，不用关心展示逻辑，所有消息展示由全局服务统一处理。

示例代码：

// message.effect.ts
@Injectable()
export class MessageEffects {
  showMessage$ = createEffect(() => 
    this.actions$.pipe(
      ofType(MessageActions.showMessage),
      tap(({ message, type }) => {
        this.messageService.show(message, type);
      })
    ), { dispatch: false }
  );

  constructor(private actions$: Actions, private messageService: MessageService) {}
}

// message.service.ts
@Injectable({ providedIn: 'root' })
export class MessageService {
  constructor(private snackBar: MatSnackBar) {}

  show(message: string, type: 'success' | 'error') {
    this.snackBar.open(message, '关闭', {
      panelClass: type === 'success' ? 'snackbar-success' : 'snackbar-error',
      duration: 3000
    });
  }
}

2. 全局消息组件 + 状态选择器 #

如果你还是想用状态管理消息，可以优化成全局组件订阅状态的方式：

• 在全局Store里维护一个currentMessage状态（只存当前要展示的消息，展示后清空）；
• 在app.component里添加一个全局消息组件，订阅currentMessage的选择器；
• 当组件dispatch消息Action时，更新currentMessage状态，全局组件自动渲染消息，展示完成后dispatch清空Action。

这种方式不用每个业务组件都处理消息，只有全局组件负责渲染，符合DRY原则。

3. NGRX Component Store（局部状态管理） #

如果你的消息是模块级别的（比如某个功能模块内的消息），可以用Component Store替代全局Store：

• 为模块创建一个Component Store，管理该模块内的消息状态；
• 模块内的组件订阅Component Store的消息状态，展示消息；
• 这样不会污染全局状态，同时保持模块内的状态逻辑独立。

二、模板中设置CSS类的DRY实现 #

1. 全局样式类 + 统一引用 #

在项目的styles.scss（或全局样式文件）中定义通用的消息样式类：

.message {
  padding: 12px;
  border-radius: 4px;
  margin: 8px 0;
}

.message-success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.message-error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

然后在所有模板里直接引用这些类：

<div class="message message-success" *ngIf="successMessage">{{ successMessage }}</div>

2. 自定义属性指令自动绑定类 #

创建一个自定义指令，根据消息类型自动添加对应的CSS类：

// message-class.directive.ts
@Directive({
  selector: '[appMessageClass]'
})
export class MessageClassDirective {
  @Input() set appMessageClass(type: 'success' | 'error' | 'info') {
    this.renderer.addClass(this.el.nativeElement, 'message');
    this.renderer.addClass(this.el.nativeElement, `message-${type}`);
  }

  constructor(private el: ElementRef, private renderer: Renderer2) {}
}

在模板里使用：

<div [appMessageClass]="message.type" *ngIf="message">{{ message.content }}</div>

这样不用每次都写[ngClass]的逻辑，指令自动处理类的绑定。

3. 封装消息展示组件 #

把消息展示封装成独立组件，内部处理样式和类的逻辑：

// message.component.ts
@Component({
  selector: 'app-message',
  template: `
    <div class="message" [ngClass]="messageClass" *ngIf="content">
      {{ content }}
    </div>
  `,
  styles: [`
    .message { 
      padding: 12px;
      border-radius: 4px;
      margin: 8px 0;
    }
    .message-success { 
      background-color: #d4edda;
      color: #155724;
      border: 1px solid #c3e6cb;
    }
    .message-error { 
      background-color: #f8d7da;
      color: #721c24;
      border: 1px solid #f5c6cb;
    }
  `]
})
export class MessageComponent {
  @Input() content: string;
  @Input() type: 'success' | 'error' = 'info';

  get messageClass(): string {
    return `message-${this.type}`;
  }
}

然后在任何需要展示消息的地方直接使用：

<app-message [content]="message" [type]="message.type"></app-message>

完全不用重复写样式和类绑定，组件内部统一处理。

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