Angular点击按钮传指令@Input绑定值时TS2339错误的解决方法

当前出现的TS2339报错，本质是混淆了Angular的模板作用域边界：

• item是定义在ItemDetailsDirective指令内部的@Input()属性，它的作用域仅属于指令自身的实例，不属于当前模板的宿主组件AppComponent。
• Angular模板的访问规则非常明确：模板中可以直接引用的变量、方法，必须是宿主组件类上定义的成员。你在AppComponent的模板里写item.value，编译器会默认去AppComponent类上查找名为item的属性，找不到自然就抛出了属性不存在的错误。
• 另外你给指令传参时写的[item]="currentItem"，这个传入值本身就是AppComponent自己定义的变量，从始至终都在AppComponent的作用域里可以直接访问，完全不需要跨边界去拿指令内部的同名属性。

方案1：直接引用组件自身持有的源值（适配你当前的代码结构） #

因为传给指令的item值本来就是AppComponent里的currentItem，完全不需要访问指令内部的属性，只需要把按钮点击事件的入参改成currentItem即可：

<!-- app.component.html 修正后的代码 -->
<h1 appItemDetails [item]="currentItem">{{currentItem}}</h1>
<button (click)="addNewItem(currentItem)">提交</button>

这个写法完全符合Angular的作用域规则，currentItem是AppComponent类上定义的字符串属性，addNewItem()是类上的公开方法，编译时不会再报错。

方案2：需要把指令内部加工后的值传回组件时的改造方式 #

如果你后续的逻辑是要在指令内部对接收的item值做加工（比如格式转换、内容裁剪），再把加工后的值传回组件给方法使用，就需要通过Angular的双向绑定语法实现值的同步：

1. 改造指令代码，新增和输入属性同名、带Change后缀的输出事件，这是Angular双向绑定语法糖的固定实现规则：

   // item-details.directive.ts
   import { Directive, Input, Output, EventEmitter } from '@angular/core';
   @Directive({
     selector: '[appItemDetails]'
   })
   export class ItemDetailsDirective {
     // 保留原有输入属性接收外部传入的值
     @Input() item: string = "";
     // 新增对应输出事件，用于向外抛item的变更值
     @Output() itemChange = new EventEmitter<string>();
   
     ngOnInit() {
       // 模拟加工逻辑：把接收到的item值转成大写后向外抛出
       const processedItem = this.item.toUpperCase();
       this.itemChange.emit(processedItem);
     }
   }
   

2. 把AppComponent模板里原来的单向输入绑定，改成双向绑定语法[(item)]="currentItem"，让指令加工后的值自动同步回AppComponent的currentItem变量上：

   <!-- 从单向绑定改成双向绑定 -->
   <h1 appItemDetails [(item)]="currentItem">{{currentItem}}</h1>
   

3. 按钮点击事件直接引用同步后的currentItem即可，不需要跨作用域访问指令内部的变量。

• Angular的模板作用域是严格隔离的，不要把指令、子组件内部的输入属性，当成父模板作用域下可以直接访问的变量。只有宿主组件类上的成员、通过模板引用变量显式暴露的实例，才能在模板中被直接引用。
• 如果你确实需要在模板中直接拿到指令实例上的属性，可以通过模板引用变量的方式实现，需要给指令补充exportAs配置指定模板中引用指令实例的名称：
  1. 给指令加exportAs配置：

     @Directive({
       selector: '[appItemDetails]',
       exportAs: 'appItemDetails' // 让模板可以通过该名称拿到指令实例
     })
     

  2. 在模板中给挂载指令的元素绑定模板引用变量，就可以直接访问指令实例的成员了：

     <!-- #itemRef 指向h1元素上挂载的ItemDetailsDirective实例 -->
     <h1 appItemDetails #itemRef="appItemDetails" [item]="currentItem">
       {{currentItem}}
     </h1>
     <!-- 这时候可以通过itemRef访问指令内部的item属性 -->
     <button (click)="addNewItem(itemRef.item)">提交</button>
     

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