Angular中*ngIf表达式里多个连续冒号的作用是什么？

你看到的连续冒号是Angular管道传递多个参数的语法符号，具体规则和你的例子拆解如下：

核心语法规则 #

Angular管道的完整使用格式是：

输入值 | 管道名称: 参数1: 参数2: 参数3...

其中冒号:的作用就是分隔管道的参数，把后续的变量/值依次传递给管道的处理方法。

对应你的例子拆解 #

看你提供的代码：

*ngIf="
    step?.salaryChangedBy?.updated
        | issalaryUpdated
        : lastViewedByUser
        : step?.salaryChangedBy?.userId
        : userId
"

各部分对应的含义：

• step?.salaryChangedBy?.updated：是管道的输入原始值，也就是要被issalaryUpdated管道处理的数据
• issalaryUpdated：自定义管道的名称
• : lastViewedByUser：传给管道的第一个参数
• : step?.salaryChangedBy?.userId：传给管道的第二个参数
• : userId：传给管道的第三个参数

对应管道的实现逻辑 #

这个自定义管道的transform方法会按顺序接收这些值，比如它的TypeScript代码大概是这样：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'issalaryUpdated' })
export class IsSalaryUpdatedPipe implements PipeTransform {
  // 参数顺序：输入值 → 第一个冒号后的参数 → 第二个冒号后的参数 → 第三个冒号后的参数
  transform(
    updated: Date | null,
    lastViewedByUser: Date | null,
    changedByUserId: string | null,
    currentUserId: string | null
  ): boolean {
    // 这里写具体的判断逻辑，返回布尔值给*ngIf做显示控制
    // 比如判断薪资是否被修改过，且当前用户需要看到这个变更提示
  }
}

简单来说，冒号就是Angular管道用来区分多个传递参数的分隔符，参数的顺序和管道transform方法里的参数顺序（除第一个输入值外）完全对应。

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