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

Question

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

据我所知，我需要创建一个根组件，它基本上会为我的应用程序提供主要的引导代码，这显然需要我的 ui-view 以便我可以注入(inject) View (状态)。

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

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

据我了解，组件应该是独立运行的自包含组件。

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

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

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

当然，UI 元素(我的特殊文本框、特殊组合框)将是自包含的。

所以我的问题是，这可以接受吗？我看不出还有什么其他办法。当然，一些更高级别的组件会依赖于其他组件，对吗？否则我的表单永远无法自行组合。

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

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

Answer 1

From what I understand I need to create a Root Component which would basically provide the main bootstrapping code for my app, this would obviously need my ui-view so that I can inject the view (state).

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

From what I understand a component should be a self contained component that should work on its own.

不确定“独立”是什么意思。一个组件就像一个类，应该做一件事并且把它做好。如果一个组件仅打算与特定的其他组件结合使用，这也很好。

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

So the registration form page would be a component but then I should also create a component for the form and a component for each "special" ui input field i.e. TextBox, Dropdown (assuming these do something special other than the standard html5 elements).

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

Should I really get down to this level, If I did that the form would need to compose itself with each of the other special components. This would mean the form could be reused and show with different elements and the same goes the for ui elements, they could be reused in other places. Should I be dropping down to this level ?

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

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

The other thing that has me a little confused is dependencies (not injection), So if form as a dependency on 3 x special combobox and 1 x of my special textbox then I would need to place these items inside IT'S template. Although now this component isn't a self contained component as it has dependencies on other components to build itself.

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