Angular输入属性传值及组件定义、绑定语法疑问

1. 代码第6行的正确写法 #

首先，第6行的????应该替换为[user]，最终代码片段如下：

<app-user [user]="user">
</app-user>

这是Angular的输入属性绑定语法，方括号[]是在告诉Angular：请把右侧表达式的值（这里是AppComponent类里的user对象）传递给<app-user>组件的user输入属性。

2. 为什么@Component装饰器要和AppComponent类配合使用？ #

简单来说，@Component是Angular的装饰器，它的核心作用是给后面的类添加「组件元数据」——相当于告诉Angular：“这个类不是普通的JS/TS类，它是一个Angular组件！”

元数据里包含了组件的关键配置信息：

• selector：组件在模板里的标签名（比如这里的my-app）
• template：组件要渲染的HTML内容
• 还有样式、依赖注入规则等其他配置

而AppComponent类则是组件的逻辑核心，用来定义组件的属性（比如这里的user对象）、方法、生命周期钩子等。两者结合起来，Angular才能完整识别、创建并渲染这个组件：装饰器负责描述组件的“身份和外观”，类负责组件的“数据和行为”。

3. 为什么要写成[user]="user"而非仅[user]？ #

这要从Angular属性绑定的语法规则说起：

• 方括号[属性名]的作用是把组件类中的数据绑定到模板元素的属性上
• 等号右边的"user"是模板表达式，指向的是AppComponent类中定义的user属性

如果只写[user]，Angular会把它理解为“绑定到模板中名为user的模板变量”——但你并没有在模板里定义过这个变量，自然会找不到数据。加上="user"，才明确告诉Angular：“把组件类里的user对象，赋值给<app-user>的user输入属性”。

举个小例子，如果你的组件类里的属性叫currentUser，那这里就需要写成[user]="currentUser"，Angular才知道该传递哪份数据～

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