Angular 9 创建带有路由的模块

在本节中，我们将学习创建带有路由的模块。我们将使用 Angular 9 来实现。如果我们不了解 Angular 9 路由模块，这个例子将帮助我们了解它。

在下面的 Angular 应用程序中，我们将创建一个 admin 模块。在 admin 模块下，将创建三个组件，分别是 home、user 和 post。该组件用于调用模块路由文件。在我们的应用程序中，我们将按照以下步骤逐步创建带有路由的模块

步骤 1

在此步骤中，我们将 创建新应用程序。将使用以下命令来创建我们的 Angular 应用程序，如下所示

步骤 2

在此步骤中，我们将 创建 Admin 模块。当我们成功创建 Angular 应用程序后，我们需要创建一个模块。我们将使用 Angular cli 命令来创建模块。在 Angular 应用程序中，我们可以使用 Angular 提供的命令来创建带有模块的模块。因此，我们将使用以下命令创建 admin 模块

当我们成功执行上述命令时，我们将创建如下文件

步骤 3

在此步骤中，我们将 为模块创建组件。将使用以下命令为 admin 模块创建组件。因此，在我们的 admin 模块中，我们将创建三个组件，分别是 home、user 和 post。

当我们成功执行上述命令时，它将创建一个包含一些文件的文件夹，如下所示

以上显示了三个组件，分别是 home、user 和 post，以及它们的 HTML 文件。如果我们想检查演示，我们可以在该文件中进行更改并添加我们的内容。

步骤 4

在此步骤中，我们将 为组件添加路由。在这里，我们将使用创建的组件来添加路由。之后，我们将使用名为 admin-routing 模块的文件并像这样更新它

src/app/admin/admin-routing.module.ts

步骤 5

在此步骤中，我们将 更新组件 HTML 文件。我们将使用 route-outlet 添加所有路由的链接。因此，我们将像这样更新它

在此文件中，我们使用 Bootstrap。如果我们的系统上没有 Bootstrap，我们将使用以下链接将其安装在我们的系统上，以便我们的应用程序能够使用它

angular-7-with-bootstrap!

src/app/app.component.html

步骤 6

在此步骤中，我们将 将模块导入 module.ts 文件。我们将使用以下方式更新该文件，如下所示

src/app/app.module.ts

现在我们上面的代码已经准备好运行了。为了运行上面的代码，我们将使用以下命令

当我们运行此命令时，将生成以下输出