Angular Databinding深层疑问：组件类与模板交互原理

1. HTML模板如何识别并访问组件类的属性？ #

Angular 处理模板的逻辑和纯 HTML 完全不同：

• 你写的带 @Component 装饰器的组件类，会被 Angular 编译器关联到指定的模板文件（或内联模板）。
• 组件渲染时，Angular 会先创建这个组件类的实例，然后把模板的执行上下文直接绑定到这个实例上。
• 模板里的所有绑定表达式（比如 {{userName}}、[disabled]="isLocked"），本质上都是在组件实例的作用域里执行，自然能直接访问实例的公共属性和方法。
• 后续的属性变化同步，靠 Angular 的变更检测机制自动维护——实例属性变了，模板会跟着更新；反过来用户操作模板（比如输入框输入）也会同步更新实例属性。

举个极简示例：

// user.component.ts
export class UserComponent {
  userName = 'Leo'; // 公共属性，模板可直接访问
}

<!-- user.component.html -->
<h1>Hi, {{userName}}</h1>

编译后，{{userName}} 会直接指向 UserComponent 实例的 userName 属性，和全局变量完全无关。

2. 组件为何要导出类？组件本身是类吗？ #

• 组件本质就是被装饰器增强的 TypeScript 类：@Component 装饰器不是给类打个标记，而是把普通 TS 类转换成 Angular 能识别的组件单元——它会给类附加元数据（比如选择器、模板路径、样式），告诉 Angular 怎么渲染、怎么复用这个组件。
• 必须导出类的原因：
  • Angular 模块（@NgModule）需要在 declarations 数组里注册组件类，如果不导出，模块文件根本没法导入这个类。
  • 当你在父组件模板里用组件选择器（比如 <app-user></app-user>）时，Angular 需要找到对应的组件类来创建实例，这也依赖类被导出后能被模块和编译器识别。
• 使用组件的过程：Angular 遇到组件选择器时，会实例化对应的组件类，然后根据装饰器里的元数据加载模板和样式，完成 DOM 渲染、样式隔离等工作——说白了就是通过实例化类，触发 Angular 把组件的模板、样式和逻辑整合起来。

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