Angular9 生成路由应用

下面的命令会用 Angular CLI 来生成一个带有应用路由模块（AppRoutingModule）的基本 Angular 应用，它是一个 NgModule，可用来配置路由。下面的例子中应用的名字是 routing-app。

ng new routing-app --routing

一旦生成新应用，CLI 就会提示你选择 CSS 或 CSS 预处理器。在这个例子中，我们接受 CSS 的默认值。

为路由添加组件

为了使用 Angular 的路由器，应用至少要有两个组件才能从一个导航到另一个。要使用 CLI 创建组件，请在命令行输入以下内容，其中 first 是组件的名称：

ng generate component first

为第二个组件重复这个步骤，但给它一个不同的名字。这里的新名字是 second。

ng generate component second

CLI 会自动添加 Component 后缀，所以如果在编写 first-component，那么其组件名就是 FirstComponentComponent。

本指南适用于 CLI 生成的 Angular 应用。如果你是手动工作的，请确保你的 "index.html" 文件的 <head& 中有 <base href="/"& 语句。这里假定 "app" 文件夹是应用的根目录，并使用 "/" 作为基础路径。

导入这些新组件

要使用这些新组件，请把它们导入到该文件顶部的 AppRoutingModule 中，具体如下：

//AppRoutingModule (excerpt)


import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';