如何在angular-cli项目中添加另一个页面？

Question

根据我另一篇问题的评论（gradle如何将javascript文件添加到war文件中的目录），我正在尝试使用angular-cli来构建和管理一个angular项目。然而，我似乎找不到任何关于如何在项目中创建第二个网页的文档，这对我来说似乎是一个非常基本的任务。我尝试使用ng g component {组件名称}创建一个"component"，但这并没有添加任何内容到构建结果中。

- Trevor Giddings

---

你应该参考教程。关于路由（在页面之间导航）的详细内容可以在这里找到：https://angular.cn/docs/ts/latest/tutorial/toh-pt5.html - Sasxa

Answer 1

我错过了 Angular 文档的路由部分，因为我没有将“路由”这个词与我想做的事情联系起来。如此处所述，当使用 Node 作为服务器时，路由功能可以完美地工作。然而，其他 Web 服务器（如我正在使用的 Tomcat）则不行，因为ng build只生成一个 index.html 文件。Node 知道它应该将基于 Angular 的 URL 重定向到该文件，但 Tomcat 不知道。需要在 Tomcat 服务器前面放置代理服务器（例如 Apache），以将 URL 重定向到应用程序的基本 URL。

现在让我们来看一下路由的基础知识：

1. 为每个“页面”创建一个组件（该组件不需要负责整个显示的页面，请参见第2点）。
2. 创建一个“外壳”组件，其中包含将出现在所有页面上的功能，例如工具栏、侧边导航等。
3. 在 shell 组件中为子 URL 组件出现的位置添加<router-outlet></router-outlet>（请注意，它们是插入到该标记之后的 DOM 中，而不是在其中）。
4. 在模块的导入中添加 RouterModule.forRoot()。该函数需要一个 Route 数组。每个路由都有一个path和一个component属性。path是相对于基本 URL 的 URL，它会导致将 component 插入到 DOM 中。请注意，path 值不应以斜杠开头。
5. 将a标签添加到新页面的 URL 上，其中routerLink 属性绑定到该 URL。请注意，在这里，应该有一个前导斜杠。

- Trevor Giddings