Angular2组件：输入和输出

在这篇文章中，我们就来看看有点接近，在角2组件-他们是如何定义的，以及如何将数据放进去，并支持他们出来。

这是在角2系列中的第二部分。 您可以阅读第一部分在这里 。 我们覆盖的部件和装饰的基本思想在以前的文章，并已明确看到了@Component和@View用于构建一个角度应用装饰。 在这篇文章下潜更深一点。 但是，我们不能覆盖约在一篇文章中组件的一切，所以以后的文章中会占用角2个组件的其他方面。

这篇文章和其他物品在该系列中的代码可作为angular2样本回购。 您还可以看到在运行样本： http://angular2-samples.azurewebsites.net/ 。

尽管可以写角2个中的ECMAScript 5应用程序（Javascript的最常见的版本，通过浏览器支持），我们更愿意在写打字稿 。 角2本身是用打字稿，它有助于我们在开发时间和包含的功能，使其更容易为我们定义角2个组件。

特别地，支持打字原稿装饰（有时被称为“注释”），其被用于声明性地添加或更改现有的“东西”。 例如，类装饰可以添加元数据类的构造函数，甚至改变怎么类的行为。 关于装饰类型的东西，你可以与他们做的更多信息，并请参阅建议Javascript的装饰 。 角2包括几个装饰器。

正如我们已经覆盖以前的文章中，角2种成分是角应用的关键组成部分。 它们包括一个图，其中的HTML和CSS定义，并且相关联的控制器实现的功能需要由图。 该控制器具有三个主要职责：

• 管理模型，即，由图中使用的应用程序数据
• 实现由对于像提交UI的数据或者隐藏/显示部分中的视图所需要的方法
• 管理相关的视图，如在其中一个列表项当前被选择的状态的数据。

根据您的背景下，上述列表可能听起来很熟悉。 事实上，角组件控制器听起来很像是由约翰·Gossman在2005年定义的视图模型的原始定义：

该术语是指“一个视图的模型”，并且可以被认为是作为视图的抽象，但它也提供了模型的一个特例，该视图可用于数据绑定。 在后一个角色的视图模型包含的数据上变压器，转换模型类型到视图类型，它包含命令查看可以使用与模型进行交互。 - 源 （捕获2015年11月27日）

因为角2成分没有本地Javascript实体，角提供了一种通过配对构造函数，以定义组件。 您可以通过定义一个构造函数（以打字稿它定义为类）和使用装饰与构造你的看法关联做到这一点。 装饰器也可以为部件设置各种配置参数。 这神奇的是使用完成@Component我们在本系列的第一篇文章中看到的装饰。

组件层次

上文描述的单个部件，但角2个应用程序实际上是由部件的层次的 - 它们开始与包含在应用程序中使用的后代的所有部件的根组件。 角2个组件意在自包含的，因为我们希望我们的封装组件功能，我们不希望其他代码任意触角伸向我们的组件来读取或更改属性。 另外，我们不希望我们的组件来影响别人写的另一个组件。 一个明显的例子是CSS：如果我们为一个组件设置CSS，我们不希望我们的CSS为“渗出”到另一个组件，就像我们不想其他的CSS“在流血”我们的组件。

同时，组件确实需要交换数据。 角2个部件可从它们的父作为接收部件已经具体地说，它是愿意接受数据接收的数据作为长。 同样，组件可以通过触发将数据发送到他们的父母家长监听的事件。 让我们看看如何在组件层次结构的行为。 首先，我们可以按照如下绘制：

每个盒是一个组件，技术上这种表示被称为“图形” - 一个数据结构由节点和连接“的边缘”。 箭头表示从一个部件的数据流到另一个，并且我们可以看到仅在一个方向上的数据流 - 从顶部向下至后代。 另外，还要注意有没有路径，让您的旅行从一个节点，通过其他节点，回到你开始了一个。 对于这种数据结构的正式名称为“单向非循环图形” - 即，它流仅在一个方向，并且在其没有圆形路径。

这种结构有一些重要的特点：它是可预测的，它是简单的遍历，它很容易地看到，当一个变化是由什么影响。 对于角度的目的，在一个节点时，数据的变化，很容易找到可能受影响的下游节点。

这是如何可以使用一个简单的例子是用含有客户的信息和关于它们的行，其中一个表组件包含表示每个客户的多个单独行部件的表。 该表组件可以管理包含所有的客户一个记录集，并通过对单个客户的数据，每次包含行组件。

这工作得很好了简单的显示数据，但在现实世界中的数据将需要流动的另一种方式 - 备份层次结构 - 当用户编辑一行如。 在这种情况下，该行需要告诉表格组件，对于一个行的数据已经改变这样的变化可以被发送回服务器。 问题是，如上面所图解，仅数据向下流动的层次结构，而不是备份。 为了确保我们维持单向数据流下来的层次结构简单，角2种用途用于发送数据不同的机制备份层次：事件。

现在，当一个子组件需要一个动作，一个家长需要了解，孩子是触发年代由家长抓住一个事件。 家长可以采取它所需要的任何动作可能包括更新的数据将通过通常的单向向下数据流，更新下游部件。 通过从向上流动的数据的数据分离的向下流动，事情都保持简单和数据管理表现良好。

角2个部件：输入和输出

与高层次看角2组件根据我们的皮带，让我们来看看可以传递给两个属性@Component装饰来实现上行和下行流量的数据：“输入”和“输出”。 这些有时被混淆，因为在角2阿尔法的早期版本，他们被称为“属性”（在“输入”）和“事件”（为“输出”）和一些开发商的名称更改小于如醉如痴，虽然它似乎有道理： https://github.com/angular/angular/pull/4435 。

“输入”，你可能从上面的讨论层次，指定哪些属性可以在组件上设置，而“产出”标识组件可以开火发送信息了层次结构对于其父事件猜测。

图1：一个组件，它使用“输入”和“输出”属性在@Component装饰

有几件事情上面关于输入和输出注意：

• 在“输入”属性传递给@Components装饰列表“MYNAME”为可接收数据的部件属性。 我们还宣布“MYNAME”作为内的公共财产ParentComp类。 如果你不声明它，打字稿编译器可能会发出警告。
• 在“输出”财产清单“myevent”作为一个自定义事件ParentComp能发出这其父就能收到。 内ParentComp类，“myevent”被声明为和设置为一个EventEmitter 。 EventEmitter是一个内置类附带的角度为我们提供了用于管理和发射自定义事件的方法。 请注意，我们必须添加EventEmitter在文件顶部的import语句。
• 该组件显示输入“MYNAME”的观点，但是，当我们试图访问它在ParentComp构造，这还没有确定。 这是因为输入属性不可用，直到观点呈现，构造函数运行之后发生的。
• 我们增加了一个“click”事件处理程序，以我们的模板调用myeventEventEmitter的“ next() ”方法，并传递它，我们希望与事件发送数据。 这是用于将数据发送向上组件层次结构中的标准图案-使用“EventEmitter”来调用“ next() ”的方法。

现在，我们已经了解了如何在一个组件定义“输入”和“输出”，让我们来看看如何使用它们。 对于CompDemo组件的模板使用ParentComp组件：

图2：此组件使用由ParentComp定义的输入和输出

语法是使用“ParentComp”非常简单：

• [myname] = "myFriend" ：这告诉角设置ParentComp输入属性“MYNAME”到“myFriend”插为CompDemo的属性的值。 请注意，我们在构造函数中设置“myFriend”
• (myevent) = "handleMyEvent($event)"这告诉角来调用CompDemo“ handleMyEvent($event) ”方法时ParentComp触发“myevent”。 我们传递给“数据next()在CompDemo”方法ParentComp可通过传递“ $event ”作为参数传递给“ handleMyEvent() ”方法。

在这两种情况下，属性的左侧指的是在ParentComp东西（输入属性还是输出事件）和右侧是指东西是在CompDemo（实例属性或方法）的上下文中解释。

如果您尝试设置ParentComp一个属性，而不将其指定为输入属性，角会不会引发错误，但也不会设置该属性。 上述模式 - 传递数据在通过“输入”属性和发送数据穿出一个“输出”事件 - 是角2个部件之间共享数据的主要方式。 我们将在以后的文章中看到，我们也可以通过定义可以注入部件，有效地给我们提供了一种组件之间共享数据或功能服务共享组件之间的数据。

@input（）和@Output（）

有可用的组件来定义输入属性和输出事件的替代语法。 在上面的例子中，我们使用了“输入”和“输出”传递到对象的属性@Component装饰器。 角也让我们使用@Input和@Output装饰，以获得相同的结果：

图3：采用@Input和@Output装饰

在ParentComp的上述版本中，我们省略了“输入”和的“输出”属性@Component定义对象。 相反，我们增加了“输入”和“输出”到导入命令第2行和使用的@Input和@Output在ParentComp类装饰申报“MYNAME”和“myevent。”

无论您使用的输入/输出或@Input / @Output ，结果是一样的，所以在选择使用哪一个在很大程度上是一种风格决定。

包起来

在这篇文章中，我们已经看到更深入的角度2个组件，它们之间的关系，以及如何将数据传递到他们以及如何将数据备份出来。 我们仍然只是皮毛在组件方面的表面; 他们可以说是角2的主要功能，也都参与了设计和建造角2个应用的方方面面。 在以后的文章中，我们将继续在角服务，以此来重复使用代码和封装关键功能在寻找更详细地探讨角2个组件。

多动手与Web开发

这篇文章是由微软和Web开发系列的一部分DevelopIntelligence实际的Javascript学习，开源项目，和互操作性的最佳实践，包括微软边缘浏览器和新的EdgeHTML渲染引擎 。

DevelopIntelligence提供教师指导的Javascript的培训 ， AngularJS培训和其他Web开发培训的技术团队和组织。

我们鼓励您跨浏览器和设备，包括微软边缘测试-适用于Windows 10的默认浏览器-与免费工具dev.microsoftedge.com ：

• 扫描您的网站外的日期库，布局问题，和无障碍
• 免费下载的虚拟机的Mac，Linux和Windows
• 检查跨浏览器包括微软边缘路线图Web平台状态
• 远程测试微软边缘自己的设备上

更深入的从我们的工程师和传福音的学习：

• 互操作性最佳实践 （ 系列 ）：
  • 如何避免浏览器检测
  • 使用CSS前缀最佳实践
  • 保持你的JS框架和库更新
  • 大厦外挂免费的Web体验
• 跨浏览器测试和最佳实践：在GitHub上编码实验室
• 哇，我可以在Mac和Linux上测试边及IE浏览器！ （从雷伊邦戈）
• 推进的Javascript不破坏网络 （基督教海尔曼）
• 释放出的3D WebGL的渲染 （从大卫Catuhe）
• 托管Web应用程序和网络平台的创新 （从基里尔Seksenov）

我们的社区开源项目：

• vorlon.JS （跨设备远程Javascript测试）
• manifoldJS （部署跨平台托管的Web应用程序）
• babylonJS （3D图形变得容易）

更多免费的工具和后端的Web开发的东西：

• Visual Studio代码 （轻量级代码编辑器为Mac，Linux或Windows）
• Visual Studio中开发纲要 （免费，基于订阅的培训和云的好处）
• 代码的Node.js与在Azure云试用

这篇文章是从微软的Web开发系列的一部分。 感谢您支持谁使SitePoint可能的合作伙伴。

From: https://www.sitepoint.com//angular-2-components-inputs-outputs/