Angular中@Input和@Output装饰器参数的作用及使用规则问询

一、装饰器参数的核心作用 #

这个参数是用来指定模板中数据绑定的别名，和指令的selector完全是两码事：

• 当你给@Input/@Output传参时，比如@Input("pa-product")，就相当于给指令类里的对应属性（比如product）在模板里起了个“绑定别名”。
• 模板中绑定数据时，就可以用[pa-product]="xxx"（输入）或(pa-category)="handleEvent($event)"（输出），而不用写类属性的原名。
• 如果不传这个参数，Angular默认会用类属性名作为绑定名（比如类里的product属性，模板里就用[product]="xxx"）。

二、为什么不需要在selector里声明？ #

指令的selector是用来指定指令何时生效的匹配规则（比如[pa-attr]表示：只要DOM元素上有pa-attr属性，这个指令就会被应用到该元素上）。而@Input/@Output的别名是数据绑定的入口名称，两者的作用完全独立：

• selector管的是“指令能不能跑起来”，
• 绑定别名管的是“指令和组件之间怎么传数据”，
  所以别名根本不需要在selector里提前声明，也和selector没有依赖关系。

三、是否可以用任意未预先声明的参数？ #

完全可以，但要遵循Angular的模板绑定规范：

• 模板里不区分大小写，所以别名通常用kebab-case（短横线分隔，比如pa-product），和HTML属性的命名习惯一致。
• 只要模板里的绑定名称和装饰器里的别名对应上，随便用什么名字都可以——哪怕这个名字从来没在selector或其他地方出现过，Angular只认你在@Input/@Output里定义的别名。

举个直观的代码例子：

@Directive({
  selector: '[pa-attr]' // 指令触发条件：元素带pa-attr属性
})
export class ProductDirective {
  // 这个Input的别名和selector对应，用来接收pa-attr属性的值
  @Input("pa-attr") attrData: any;
  // 这个Input的别名是pa-product，和selector无关，仅用于模板传值
  @Input("pa-product") productInfo: any;
  // 这个Output的别名是pa-category，用于抛出事件给模板
  @Output("pa-category") categoryChanged = new EventEmitter<string>();
}

模板中用法：

<!-- pa-attr触发指令，pa-product/pa-category负责数据交互 -->
<div pa-attr [pa-product]="currentProduct" (pa-category)="handleCategoryChange($event)"></div>

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