在 Angular2 中，子组件如何访问父组件的属性是前端开发中一个常见的问题。本文将详细介绍 Angular2 中如何实现这个功能，并提供示例代码以供参考。
父组件向子组件传递数据
首先，在 Angular2 中，父组件可以通过以下方式向子组件传递数据：
- 通过输入属性（Input）：父组件可以通过输入属性将数据传递给子组件。子组件需要使用
@Input装饰器来声明输入属性，并使用Input类型来接收传递过来的数据。
下面是一个简单的父组件和子组件的示例，演示如何通过输入属性向子组件传递数据：
-- -------------------- ---- -------
-- ---
------ - --------- - ---- ----------------
------------
--------- -------------
--------- -
---------- --------------------------------------
--
--
------ ----- --------------- -
------------- - -------- ---- --------
-
-- ---
------ - ---------- ----- - ---- ----------------
------------
--------- ------------
--------- --- ------- ----
--
------ ----- -------------- -
-------- -------- -------
-在上面的代码中，父组件使用 [message]="parentMessage" 将 parentMessage 属性的值传递给了子组件的 message 输入属性。子组件通过 @Input() message: string 声明了 message 属性，并在模板中使用了它来显示传递过来的消息。
子组件如何访问父组件的属性
回到本文的主题：子组件如何访问父组件的属性？
在 Angular2 中，子组件可以通过以下方式访问父组件的属性：
- 通过模板变量（Template Reference Variable）：子组件可以在模板中通过模板变量引用父组件的属性。模板变量使用
#符号定义，在模板中直接使用即可。
下面是一个简单的示例，演示如何通过模板变量访问父组件的属性：
-- -------------------- ---- -------
-- ---
------ - --------- - ---- ----------------
------------
--------- -------------
--------- -
---------- -------------------
------- ---------------------------------- ----------------
--
--
------ ----- --------------- -
------- - ------ ---- --------
------------- -
-------------------- ---- --------- --------------
-
-
-- ---
------ - ---------- --------- - ---- ----------------
------ - --------------- - ---- ---------------------
------------
--------- ------------
--------- ---
--
------ ----- -------------- -
--------------------------- ------- ----------------
------------- -
---------------------- ------- ---- --------- ---------------------
-
-在上面的代码中，父组件和子组件之间没有通过输入属性或输出属性进行数据通信。相反，父组件在模板中使用了一个名为 child 的模板变量引用子组件。子组件通过 @ViewChild(ParentComponent) parent: ParentComponent 声明了 parent 变量，并使用它来访问父组件的属性。
在父组件中，当用户点击按钮时，将调用 showMessage() 方法，该方法访问了父组件的 message 属性，并将它输出到控制台。在子组件中，当用户点击按钮时，将调用 showMessage() 方法，该方法访问了父组件的 message 属性，并将它输出到控制台。
总结
在 Angular2 中，父组件和子组件之间可以通过输入属性和输出属性进行数据通信。除此之外，子组件还可以通过模板变量访问父组件的属性。本文介绍了
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651bb80395b1f8cacd358ba3