Angular 9/8 路由和嵌套路由

在本节中，我们将学习路由和嵌套路由。我们将使用 Angular 8 或 Angular 9 来完成此操作。首先，我们将在 Angular 9/8 中创建一个路由，然后我们将创建一个嵌套根路由。

本节将提供两个示例，以便于理解 Angular 8 中的路由和嵌套路由。在第一个示例中，我们将创建一个简单的路由。在第二个示例中，我们将创建嵌套路由。

如果我们在大型应用程序上工作或创建单页应用程序，我们的应用程序就需要使用路由系统。要创建简单的路由和子路由，步骤如下所示

示例 1

在第一个示例中，我们将创建一个简单的路由。为此，我们将使用简单的组件。要安装新的 Angular 应用程序，我们将使用以下命令，如下所示

当我们成功执行上述命令时，命令提示符将要求我们创建路由模块。对于添加 Angular 路由选项，我们必须写 yes，如下所示

当我们成功安装 Angular 应用程序时，我们将安装 Bootstrap。如果我们的系统中没有 Bootstrap，我们将使用以下链接为我们的 Angular 8 应用程序安装 Bootstrap

angular-7-with-bootstrap

当我们成功下载 Bootstrap 应用程序后，我们需要为容器和标头进行设置。为此，我们将使用 app.component.html 文件并像这样更新该文件

src/app/app.component.html

现在在我们的应用程序中，我们需要创建两个组件。第一个组件将为 home 创建，第二个组件将为 post 创建。要创建这些组件，我们将使用以下命令

当我们成功创建这两个组件时，我们将使用这些组件来创建路由。为此，我们将使用路由模块文件并进行一些更改，如下所示

src/app/app-routing.module.ts

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

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

示例 2

在第二个示例中，我们将创建嵌套路由。这里将为 posts 创建子路由。现在在我们的应用程序中，我们需要再创建两个组件。我们将为 posts 创建这些组件。第一个组件将为 post create 创建，第二个组件将为 post detail 创建。要创建这些组件，我们将使用以下命令

当我们成功创建这两个组件时，我们有三个用于 posts 的组件：第一个组件用于列表，第二个组件用于创建，第三个组件用于详情。现在，我们将使用路由模块文件并进行注册，如下所示

src/app/app-routing.module.ts

现在我们将使用 html 组件文件。为了更好地查看，我们将像这样更新该文件

src/app/home/home.component.html

src/app/posts/posts.component.html

src/app/posts/post-create/post-create.component.html

src/app/posts/post-detail/post-detail.component.html

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

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

主页

帖子列表页

创建帖子页面

帖子详情页