Angular 新路由器 - 嵌套组件和路由

路由器

Angular 新路由器是一个强大的工具，它可以帮助我们构建具有嵌套组件和路由功能的应用程序。在本文中，我们将学习如何使用新路由器来创建嵌套组件和路由，并通过一个案例代码来演示。

创建嵌套组件

在Angular中，嵌套组件是指一个组件包含在另一个组件中。通过嵌套组件，我们可以将应用程序的不同部分划分为更小的可重用组件，从而提高代码的可维护性和可扩展性。

要创建嵌套组件，我们首先需要创建一个父组件，在该父组件的模板中引入子组件。以下是一个简单的例子：

typescript
// 父组件
import { Component } from '@angular/core';
@Component({
  selector: 'app-parent',
  template: <code>
    <h1>父组件</h1>
    <app-child></app-child>
  </code>
})
export class ParentComponent { }
// 子组件
import { Component } from '@angular/core';
@Component({
  selector: 'app-child',
  template: <code>
    <h2>子组件</h2>
  </code>
})
export class ChildComponent { }

在上面的例子中，我们创建了一个父组件（ParentComponent）和一个子组件（ChildComponent）。在父组件的模板中，我们使用 的方式引入了子组件。

创建路由

在Angular中，路由是指根据URL路径来确定要显示的组件。通过使用路由，我们可以实现不同URL路径对应于不同的组件，从而实现页面之间的导航。

要创建路由，我们首先需要在应用程序的根模块中导入和配置路由模块。以下是一个简单的例子：

typescript
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
// 配置路由
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];
@NgModule({
  imports: [BrowserModule, RouterModule.forRoot(routes)],
  declarations: [AppComponent, HomeComponent, AboutComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

在上面的例子中，我们在根模块（AppModule）中导入和配置了路由模块（RouterModule）。我们定义了两个路由，空路径对应于 HomeComponent 组件，而路径为 'about' 的URL对应于 AboutComponent 组件。

嵌套组件和路由结合应用

现在，我们已经学习了如何创建嵌套组件和路由，接下来让我们将它们结合起来应用到我们的案例中。

在我们的案例中，我们将创建一个父组件（ParentComponent），该组件包含两个子组件（HomeComponent 和 AboutComponent）。我们将在根模块中配置两个路由，空路径对应于 HomeComponent 组件，而路径为 'about' 的URL对应于 AboutComponent 组件。

以下是案例代码：

typescript
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { ParentComponent } from './parent.component';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
// 配置路由
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];
@NgModule({
  imports: [BrowserModule, RouterModule.forRoot(routes)],
  declarations: [AppComponent, ParentComponent, HomeComponent, AboutComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }
// parent.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-parent',
  template: <code>
    <h1>父组件</h1>
    <router-outlet></router-outlet>
  </code>
})
export class ParentComponent { }
// home.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-home',
  template: <code>
    <h2>首页</h2>
  </code>
})
export class HomeComponent { }
// about.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-about',
  template: <code>
    <h2>关于我们</h2>
  </code>
})
export class AboutComponent { }

在上面的案例代码中，我们创建了一个父组件（ParentComponent），该组件的模板中使用 的方式来展示当前路由对应的组件。

同时，我们还创建了两个子组件（HomeComponent 和 AboutComponent），它们分别对应着根模块中配置的两个路由。

通过以上的代码，我们成功地将嵌套组件和路由应用到了我们的案例中。现在，当我们访问应用程序的根路径时，将会显示 HomeComponent 组件；而当我们访问路径为 'about' 的URL时，将会显示 AboutComponent 组件。

在本文中，我们学习了如何使用Angular新路由器来创建嵌套组件和路由。通过嵌套组件，我们可以将应用程序的不同部分划分为更小的可重用组件；而通过路由，我们可以实现页面之间的导航。通过一个简单的案例代码，我们演示了如何将嵌套组件和路由应用到我们的应用程序中。希望本文对你理解和应用Angular新路由器有所帮助。