将类应用于嵌套的angular9的不同html路由

将类应用于嵌套的 Angular 9 的不同 HTML 路由是指在 Angular 9 中使用嵌套路由来加载不同的 HTML 模板，并将相应的类应用于这些模板。嵌套路由是指在一个父组件中加载多个子组件，并通过路由配置来管理它们的加载和导航。

在 Angular 9 中，可以通过以下步骤将类应用于嵌套的不同 HTML 路由：

配置路由：在路由模块中定义父组件和子组件之间的路由关系。可以使用 RouterModule.forChild() 方法来配置子路由。例如：

const routes: Routes = [
  {
    path: 'parent',
    component: ParentComponent,
    children: [
      { path: 'child1', component: Child1Component },
      { path: 'child2', component: Child2Component },
      // 其他子路由配置
    ]
  }
];

创建父组件和子组件：创建父组件和子组件的类和 HTML 模板。可以使用 @Component 装饰器来定义组件，并在 HTML 模板中使用相应的选择器来引用它们。

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  // 父组件的类代码
}

@Component({
  selector: 'app-child1',
  templateUrl: './child1.component.html',
  styleUrls: ['./child1.component.css']
})
export class Child1Component {
  // 子组件1的类代码
}

@Component({
  selector: 'app-child2',
  templateUrl: './child2.component.html',
  styleUrls: ['./child2.component.css']
})
export class Child2Component {
  // 子组件2的类代码
}

在父组件的 HTML 模板中添加路由出口：在父组件的 HTML 模板中添加 <router-outlet></router-outlet> 标签，用于加载子组件的 HTML 模板。

<!-- parent.component.html -->
<div>
  <h1>Parent Component</h1>
  <router-outlet></router-outlet>
</div>

在父组件中导航到子组件：可以使用 routerLink 指令或 Router 服务的 navigate() 方法在父组件中导航到子组件。例如：

<!-- parent.component.html -->
<div>
  <h1>Parent Component</h1>
  <ul>
    <li><a routerLink="/parent/child1">Child 1</a></li>
    <li><a routerLink="/parent/child2">Child 2</a></li>
  </ul>
  <router-outlet></router-outlet>
</div>

添加路由导航到应用模块：在应用模块中添加路由导航，将父组件作为根路由。例如：

const routes: Routes = [
  { path: '', redirectTo: '/parent', pathMatch: 'full' },
  { path: 'parent', component: ParentComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

通过以上步骤，就可以在 Angular 9 中将类应用于嵌套的不同 HTML 路由。根据具体的业务需求，可以根据路由配置加载不同的 HTML 模板，并将相应的类应用于这些模板。

关于 Angular 9 的更多信息和示例代码，可以参考腾讯云的 Angular 文档和相关产品：