Question

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

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

我在尝试了解创建组件时应该如何细节时遇到问题。

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

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

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

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

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

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

所以我的问题是，这可以接受吗？我没有看到任何其他方式。当然一些更高的组件会依赖其他组件吗？否则我的形式永远不会自我组成。

我在这里遗漏了什么吗？是否有替代方法可以将其他组件放在模板中？

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

Answer 1

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

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

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

不确定你的意思＆＃34;自包含＆＃34;。像类一样的组件应该做一件事并且做得好。如果某个组件只能与特定的其他组件一起使用，那么这也很好。

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

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

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

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

我认为构建通用表单组件并不常见，但可以做到这一点，并且我确定在某些情况下这是完全合理的。 Angular2组件也支持transclusion。您可以创建一个包含边框和提交按钮的表单组件，以及一个显示验证错误的区域和一个放置子项的<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＆＃39; S模板。虽然现在这个组件不是一个自包含的组件，因为它依赖于其他组件来构建自己。

在上面的示例中，<my-form>组件不需要了解<my-dropdown>或<my-date>，只有使用<my-form>的组件，{{ 1}}或<my-dropdown>需要在<my-date>中列出它们。

Angular 2.0（1.5用ui-router）组件创建

1 个答案: