Angular中[]属性绑定与@Input的数据流方向疑问

你提到的这个问题核心是对Angular属性绑定的上下文理解偏差：

多数教程里说的“属性绑定单向从组件到视图”，是指组件类作为数据源头，将值传递给模板中的DOM元素属性或内置指令的常规场景。但在自定义指令的场景中，指令本身是一个可接收外部输入的类，此时数据流向是从父模板（组件的HTML）流向指令类的@Input()属性，这依然完全符合Angular的单向数据流规则，并不存在方向“相反”的情况。

具体到你的示例： #

你给出的示例代码如下：

HTML模板代码： #

<div appSampleColorChange [color]="'red'" [backgroundColor]="'blue'">Text using directive</div>

指令TS代码： #

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appSampleColorChange]',
})
export class SampleColorChangeDirective {
  @Input() color: string = '';
  @Input() backgroundColor: string = '';

  constructor(private el: ElementRef) {}

  @HostListener('mouseleave') onMouseLeave() {
    this.el.nativeElement.style.backgroundColor = 'green';
  }

  @HostListener('mouseenter') onMouseEnter() {
    this.el.nativeElement.style.color = this.color;
    this.el.nativeElement.style.backgroundColor = this.backgroundColor;
  }
}

1. 指令中的@Input()作用 #

指令类里的@Input() color: string = ''，本质是声明这个属性可以接收来自父上下文（组件模板或父组件）的输入值——这是Angular中父向子（子可以是组件或指令）传递数据的标准方式。

2. 模板中的属性绑定逻辑 #

模板里的[color]="'red'"，这里的属性绑定是把模板内的常量值'red'，传递给指令类中被@Input()标记的color属性。这个过程是数据从父模板（属于组件的视图层）流向指令类，并没有违背单向数据流的原则。

总结 #

教程里的“组件到视图”描述，其中的“视图”包含了视图内所有的Angular元素（组件、指令），并非仅指原生DOM元素的属性。属性绑定的核心是数据从定义方流向使用方，当指令需要从父模板获取数据时，就通过@Input()配合属性绑定来实现，这是完全合理的用法。

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