Angular 2.0 (1.5 with ui-router) 组件创建

Question

我正在尝试将 Angular 1.x 应用程序更改为使用 Angular 1.5 组件，这是一项新功能（问题应该与 Angular 2.0 相关）。

据我了解，我需要创建一个根组件，它基本上将为我的应用程序提供主要的引导代码，这显然需要我的 ui-view 以便我可以注入视图（状态）。

我在尝试了解在创建组件时应该获得多少细节时遇到了问题。

让我们以一个注册表单页面为例，这是一个很好的例子，说明我真的不能 100% 确定如何继续。

据我了解，组件应该是一个独立的组件，应该独立工作。

所以注册表单页面将是一个组件，但我还应该为表单创建一个组件，并为每个“特殊” ui 输入字段（即 TextBox、Dropdown）创建一个组件（假设这些除了标准 html5 元素之外还做了一些特殊的事情)。

我真的应该降到这个级别吗？如果我这样做了，表单将需要与其他每个特殊组件组合在一起。这意味着表单可以重用并显示不同的元素，对于 ui 元素也是如此，它们可以在其他地方重用。我应该降到这个水平吗？

让我有点困惑的另一件事是依赖关系（不是注入），所以如果表单依赖于 3 x 特殊组合框和 1 x 我的特殊文本框，那么我需要将这些项目放在 IT'S 模板中。虽然现在这个组件不是一个自包含的组件，因为它依赖于其他组件来构建自己。

当然，UI 元素（我的特殊文本框、特殊组合框）是独立的。

所以我的问题是，这可以接受吗？我没有看到任何其他方式。当然，一些更高的组件会依赖于其他组件，对吧？否则我的表单永远无法自己组合。

我在这里遗漏了什么吗？除了在模板中放置其他组件之外，还有其他方法吗？

我想我可以为表单中的每个组件使用一个子状态，但这只是感觉不对，虽然这会从更高的组件中删除组件标签，但我仍然需要有 NAMED ui-views。

Answer 1

据我了解，我需要创建一个根组件，它基本上将为我的应用程序提供主要的引导代码，这显然需要我的 ui-view 以便我可以注入视图（状态）。

在 Angular2 中有一个根组件，它封装了整个 Angular2 应用程序。您可以在一个页面上拥有多个 Angular2 应用程序。每个应用程序都使用自己的根组件单独引导。应用程序由它的视图和添加到它的 HTML、组件和指令组成。

据我了解，组件应该是一个独立的组件，应该独立工作。

不确定您所说的“自给自足”是什么意思。像类这样的组件，应该做一件事，并且把它做好。 如果一个组件只打算与一个特定的其他组件一起使用，这也很好。

例如，当您的菜单项组件仅适用于您的自定义菜单组件时。当然最好有一个可以在其他菜单组件中工作的菜单项，但是当您的菜单组件与自定义菜单项组件一起使用时可以提供特殊功能时，那是完全有效的。

所以注册表单页面将是一个组件，但我还应该为表单创建一个组件，并为每个“特殊” ui 输入字段（即 TextBox、Dropdown）创建一个组件（假设这些除了标准 html5 元素之外还做了一些特殊的事情)。

如果您为每个 UI 元素制作 Angular 组件，最大的优势是您可以在其他组件和应用程序中重用这些组件。 这也与我上面所说的一致。一个组件应该做一件事并且做好。然后从您的组件中组合其他组件和应用程序。

我真的应该达到这个水平吗？如果我这样做了，表单将需要与其他每个特殊组件组合在一起。这意味着表单可以重复使用并显示不同的元素，对于 ui 元素也是如此，它们可以在其他地方重复使用。我应该降到这个水平吗？

我认为构建通用表单组件并不常见，但它可以做到，而且我确信在某些情况下这样做非常有意义。 Angular2 组件也支持嵌入。您可以创建一个表单组件，其中包含一个边框和一个提交按钮，以及一个显示验证错误的区域和一个布置子级的 <ng-content></ng-content> 标记。

<my-form>
  <my-dropdown label="gender" [data]="genderList" [(ngModel)]="gender"></my-dropdown>
  <my-date label="birth date" [(ngModel)]="birthDate"><my-date>
</my-form>

让我有点困惑的另一件事是依赖关系（不是注入），所以如果表单依赖于 3 x 特殊组合框和 1 x 我的特殊文本框，那么我需要将这些项目放在 IT'S 模板中。虽然现在这个组件不是一个自包含的组件，因为它依赖于其他组件来构建自己。

在我上面的例子中，<my-form> 组件不需要了解<my-dropdown> 或<my-date>，只有使用<my-form>、<my-dropdown> 或<my-date> 的组件需要列出它们在directives: [MyForm, MyDropdown, MyDate]。