如何在指定父组件中禁用子组件的MatRipple效果

要实现仅在group-message父组件中禁用text-message子组件的MatRipple效果，通过父子组件输入属性绑定就能优雅解决，具体步骤如下：

1. 给子组件添加可接收的输入属性 #

在text-message.component.ts中，新增一个@Input()属性来接收父组件的禁用指令，同时调整波纹触发逻辑：

import { Component, Input, ViewChild, OnInit, OnChanges } from '@angular/core';
import { MatRipple } from '@angular/material/core';

@Component({
  selector: 'text-message',
  templateUrl: './text-message.component.html',
  styleUrls: ['./text-message.component.css']
})
export class TextMessageComponent implements OnInit, OnChanges {
  // 添加输入属性，默认不禁用波纹
  @Input() disableRipple = false;
  @ViewChild(MatRipple, { static: true }) ripple: MatRipple;

  launchRipple() {
    // 如果禁用则不触发波纹
    if (this.disableRipple) return;
    
    this.ripple.launch({
      persistent: false,
      centered: true,
      animation: { enterDuration: 1000, exitDuration: 1200 },
      color: 'rgba(33, 150, 243, 0.15)'
    });
  }

  ngOnInit() {
    // 初始化时设置波纹禁用状态
    this.ripple.disabled = this.disableRipple;
  }

  ngOnChanges() {
    // 输入属性变化时同步更新波纹状态
    this.ripple.disabled = this.disableRipple;
  }
}

2. 绑定模板中的MatRipple禁用状态 #

在text-message.component.html中，把matRipple的禁用状态和输入属性绑定：

<div 
  matRipple 
  [matRippleDisabled]="disableRipple"
  class="text-message" 
  [ngClass]="{'unread': !message?.tmsRead}" 
  appDblClick
  (dblclick)="onClick($event)"
>
  <!-- 子组件内部内容 -->
</div>

3. 在group-message父组件中传递禁用指令 #

现在可以直接在group-message.component.html中使用[disableRipple]="true"，因为子组件已经定义了这个输入属性：

<text-message 
  [message]="message" 
  [timeOffset]="currentSiteTimeOffset$ | async" 
  [showStatus]="false" 
  [disableRipple]="true"
></text-message>

为什么之前的方法不行？ #

• 第一种方法报错是因为text-message组件未定义disableRipple输入属性，Angular无法识别该绑定。
• 第二种方法用@ViewChildren(MatRipple)获取的是QueryList<MatRipple>（并非单个实例），且直接访问disabled不会生效，这种跨组件操作内部实例的方式不符合Angular组件封装原则，输入属性传递状态才是标准做法。

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