首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

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

  1. 配置路由:在路由模块中定义父组件和子组件之间的路由关系。可以使用 RouterModule.forChild() 方法来配置子路由。例如:
代码语言:txt
复制
const routes: Routes = [
  {
    path: 'parent',
    component: ParentComponent,
    children: [
      { path: 'child1', component: Child1Component },
      { path: 'child2', component: Child2Component },
      // 其他子路由配置
    ]
  }
];
  1. 创建父组件和子组件:创建父组件和子组件的类和 HTML 模板。可以使用 @Component 装饰器来定义组件,并在 HTML 模板中使用相应的选择器来引用它们。
代码语言:txt
复制
@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的类代码
}
  1. 在父组件的 HTML 模板中添加路由出口:在父组件的 HTML 模板中添加 <router-outlet></router-outlet> 标签,用于加载子组件的 HTML 模板。
代码语言:txt
复制
<!-- parent.component.html -->
<div>
  <h1>Parent Component</h1>
  <router-outlet></router-outlet>
</div>
  1. 在父组件中导航到子组件:可以使用 routerLink 指令或 Router 服务的 navigate() 方法在父组件中导航到子组件。例如:
代码语言:txt
复制
<!-- 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>
  1. 添加路由导航到应用模块:在应用模块中添加路由导航,将父组件作为根路由。例如:
代码语言:txt
复制
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 文档和相关产品:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular 从入坑到挖坑 - Router 路由使用入门指北

四、Step by Step 4.1、基础概念 4.1.1、base url 在 Angular 应用中,框架会自动将 index.html 文件中的 base url 配置作为组件、模板和模块文件的基础路径地址...同样的,我们也可以在 js 中完成路由的跳转,对于这种使用场景,我们需要在进行 js 跳转的组件类中通过构造函数依赖注入 Router 类,之后通过 Router 类的 navigate 方法完成路由的跳转...4.2.2、动态路由传递 与使用查询参数不同,使用动态路由进行参数传值时,需要我们在定义路由时就提供参数的占位符信息,例如在下面定义路由的代码里,对于组件所需的参数 newsId,我们需要在定义路由时就指明...4.3、嵌套路由 在一些情况下,路由是存在嵌套关系的,例如下面这个页面,只有当我们点击资源这个顶部的菜单后,它才会显示出左侧的这些菜单,也就是说这个页面左侧的菜单的父级菜单是顶部的资源菜单 ?...,因此当嵌套路由配置完成之后,在嵌套的父级页面上,我们需要定义一个 标签用来指定子路由的渲染出口,最终的效果如下图所示 我是父路由页面显示的内容

4.2K50

:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

例如,当我们访问 https://www.yousite.com/index.html 这个网址的时候,服务器会自动把我们的请求对应到当前站点路径下面的 index.html 文件,然后再给予响应,将这个文件返回给浏览器...例如,在某些情况下,我们需要定位页面上的某些位置,就像下面的例子中展现的那样,我想要通过点击不同的按钮就跳转到指定的位置,这里我们使用的锚点定位其实就是 hash。...在上面的代码中,也使用到了嵌套路由和路由的重定向。...通过使用路由重定向,我们可以将用户访问网站的根目录 / 时进行重定向到 /home ,而嵌套路由则可以将 URL 中各段动态路径也按某种结构对应到实际嵌套的各层组件。   ...另外,在实际使用中我们会遇到路由传参,可能会因为 hash 路由不漂亮,从而准备采用 history 路由,对于这些需求的实现,将放在下一章中进行学习。

1.1K10
  • 【Next.js】002-路由篇|App Router

    四、使用 App Router1、定义路由文件夹被用来定义路由。 每个文件夹都代表一个对应到 URL 片段的路由片段。创建嵌套的路由,只需要创建嵌套的文件夹。...根布局(Root Layout)布局支持嵌套,最顶层的布局我们称之为根布局(Root Layout),也就是 app/layout.js。它会应用于所有的路由。除此之外,这个布局还有点特殊。...:依赖 useEffect 和 useState 的功能需要在路由切换时重置的功能需要修改框架默认行为的场景(如 Suspense)代码结构布局:使用 layout.js 文件可以嵌套使用会自动复用已渲染的组件模板...这个回调函数负责将 fallback UI 替换为实际内容。当数据加载完成后,Promise 变为 resolved 状态,then 回调函数执行,从而自动完成 UI 的切换。...loading.js 的实现原理是将 page.js和下面的 children 用 包裹。

    28010

    【Next.js】002-路由篇|App Router

    四、使用 App Router 1、定义路由 文件夹被用来定义路由。 每个文件夹都代表一个对应到 URL 片段的路由片段。**创建嵌套的路由,只需要创建嵌套的文件夹。...根布局(Root Layout) 布局支持嵌套,最顶层的布局我们称之为根布局(Root Layout),也就是 app/layout.js。它会应用于所有的路由。除此之外,这个布局还有点特殊。...需要修改框架默认行为的场景(如 Suspense) 代码结构 布局: 使用 layout.js 文件 可以嵌套使用 会自动复用已渲染的组件 模板: 使用 template.js 文件 也可以嵌套使用...这个回调函数负责将 fallback UI 替换为实际内容。当数据加载完成后,Promise 变为 resolved 状态,then 回调函数执行,从而自动完成 UI 的切换。...loading.js 的实现原理是将 page.js和下面的 children 用 包裹。

    31301

    HTTP的世界观

    前端圈技术的爆发式增长随之而来的开发人员学不动的疲惫感、焦虑感和不想跳出舒适圈的拖延懒惰。 jQuery华丽谢幕,React v16已经普及、Angular9和Vue3即将发布。.../1.1再次修订,将大文档拆分为六份较小的文档,RFC7230-7235 2015年HTTP/2发布RFC7540 (基于谷歌的SPDY协议) 2018年,互联网标准化组织IETF提议将HTTP...3.HTTP/0.9 GET/index.html HTTP/0.9当时是为了学术交流,基于请求和响应的模式,在网络中传输HTML超文本的内容。 如上所示,只有一个请求行,没有HTTP请求头和请求体。...因为都是HTML格式的文件,决定了返回的文件内容通过ASCII字符流进行传输。...因此,请求头中也增加了Host字段,表示当前的域名地址,服务器可根据不同的Host值做不同的处理。

    39430

    瑜亮之争:Vue与React的差异

    在 标签中编写的任何 CSS 代码仅会应用于由该组件生成的元素。 使用 scoped CSS 的方式重新编写上一个例子会像这样 : ?...尽管在 style 标签中的 CSS 代码使用了通用的类名称,而且看起来它们可能会应用于组件外的其他元素,但它们确实将仅适用于该组件元素当中的子元素。话虽如此,仍然推荐使用更长、更具有表述性的类名。...scoped CSS 同时也可以和 SCSS 或者其他的 CSS 预处理器搭配和嵌套使用。 生态 由于 React 受欢迎和被广泛使用的程度,它拥有庞大的生态系统。...vue-router 是 Vue 中处理客户端路由的官方库。它使用对象来配置路由而不是 JSX 语法。 ? 两个库以不同的方式来完成相同的事情。...它们之间的不同点在于术语和修改的差异性。 使用 Redux 你会拥有一个存储状态(state)的 store。

    1.3K20

    Vue Router详细教程

    转送将输入端的数据转移到合适的输出端。路由中有一个非常重要的概念叫路由表。路由表本质上就是一个映射表,决定了数据包的指向。 1.2后端路由阶段 早期的网站开发整个HTML页面是由服务器来渲染的。...当我们页面中需要请求不同的路径内容时,交给服务器来进行处理,服务器渲染好整个页面,并且将页面返回给客户顿。...我们可以访问其官方网站对其进行学习: https://router.vuejs.org/zh/ vue-router是基于路由和组件的路由用于设定访问路径,将路径和组件映射起来。..., routes, linkActiveClass: 'active' //修改类名称 }) 4.5路由的代码跳转 有时候我们需要在路由跳转的同时执行一些操作,那么通过...5.路由嵌套 嵌套路由是一个很常见的功能,比如在home页面中, 我们希望通过/home/news和/home/message访问一些内容。

    3.7K30

    后端 学习 前端 Vue 框架基础知识

    1、Vue 标准开发方式   组件就是用来减少Vue实例对象中的代码量而存在的,日后在使用Vue开发的过程中,可以根据不同业务功能将页面划分不同的组件,然后由多个组件去完成页面的布局,便于使用Vue进行开发页面管理...先简单说明一下路由的思想,之前我们是把子组件注册到 父组件中进行使用的,通过标签进行显示,现在通过 路由管理组件 ,在vue实例中注册路由管理器,一个路由对应一个组件,我们通过切换路由达到 在一个页面中不同组件显示的效果...通过 Vue Router 可以将现有的Vue开发便的更加灵活,可以根据前端的url对应在页面中展示不同的组件。...-- 名称切换路由,根据路由的name切换不同的组件--> 用户登录 路由规则对象除了 path、component、name,再由 child:[],放置子路由,里面再放一个路由规则对象 达成嵌套路由的形式 实现效果 注意 如何嵌套路由?

    1.8K20

    超燃|从0到1手把手带你实现一款Vue-Router

    我们正是需要 createMatcher 方法将传入的多维度路由数据表格式化成为一维列表,比如我们上方配置的: 可以看到它是一个嵌套结构,VueRouter 这样设计是为了开发者在开发时拥有更加直观的路由嵌套结构...,它在源码中是将多维度的嵌套结构展开变成一维映射表方便后续处理。...mode 从而创建不同的路由方式创建不同的类实例方法赋值给 this.history 属性。...可以看到 HashHistory 和 HTML5History 都继承了 BaseHistory 这个父类,这样做的好处是我们在上层子类中定义各自模式下不同的细节实现而在 BaseHistory 抽离相同的逻辑分别继承给两个子类进行调用...还是定义了一系列的实例方法,唯一不同的是就是将 hash 对应的 API 替换成为了 HTML 5 History API 。

    2.2K40

    深入了解 AngularJS 路由的原理和使用技巧

    通过使用 AngularJS 的路由功能,我们可以轻松地管理应用程序的不同视图,并根据URL的变化加载不同的组件。本文将详细介绍 AngularJS 路由的概念、特性和用法。...其次,它能够将应用程序的不同视图分离开来,使得代码更加易读、易维护。此外,路由还可以通过URL进行导航,方便用户的书签和分享。...控制器负责处理特定视图的业务逻辑,而模板定义了视图的HTML结构。通过在路由规则中指定控制器和模板,我们可以根据不同的路由加载不同的组件。...通过这种方式,我们可以在控制器中获取和使用路由参数。4.2 嵌套路由在某些情况下,我们可能需要在应用程序中实现嵌套路由。...AngularJS 提供了嵌套路由的支持,通过在父路由中定义子路由规则,我们可以在页面中嵌套加载不同的组件。

    21410

    laravel中的api路由前缀

    这里面的路由会被分配给 web 中间件组,它提供了会话状态和 CSRF 保护等功能。 定义在 routes/api.php 中的路由都是无状态的,并且被分配了 api 中间件组。...大多数的应用构建,都是以在 routes/web.php 文件定义路由开始的。可以通过在浏览器中输入定义的路由 URL 来访问 routes/web.php 中定义的路由。...('/user', [UserController::class, 'index']); 定义在 routes/api.php 文件中的路由是被 RouteServiceProvider 嵌套在一个路由组内...在这个路由组中,将自动应用 /api URI 前缀,所以你无需手动将其应用于文件中的每个路由。你可以通过修改 RouteServiceProvider 类来修改前缀和其他路由组选项。...在app\Providers\RouteServiceProvider.php 中修改API路由的前缀Route::prefix('api') ?

    3.2K10

    Vue 路由

    History 路由是基于 HTML5 规范,在 HTML5 规范中提供了 history.pushState || history.replaceState 来进行路由控制 vue-router...它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌 实现根据不同的请求地址 而显示不同的组件 快速体验 导入vue和vue-router 设置HTML中的内容 路由匹配到的组件将渲染在这里 --> 创建组件 // 创建组件 // 组件也可以放到单独的js文件中 var Home = {    template...var vm = new Vue({    el: '#app',    router }); 动态路由 场景: 不同的path对应同一个组件 注意: 变化的路由 改成 :参数 此时可以通过路由传参来实现...$route.params.id);   } }; 路由嵌套 如果存在组件嵌套,就需要提供多个视图容器 同时,router-link和router-view 都可以添加类名、设定样式 <div

    45730

    React Router初学者入门指南(2023版)

    如果你对路由的概念不熟悉,可以将其视为在网站的不同部分之间导航的过程。例如,当你进入网站的“联系我们”部分时,你已经成功进行了一次路由过程。...理解路由概念 在我们继续之前,让我们快速了解一些React Router中的关键概念: History Stack:React Router智能地使用HTML5 History API来跟踪用户的导航历史...然后,在 App 组件内部, Routes 组件限制了不同的 Route 组件。 第一个路由的路径设置为("/"),当访问时将渲染 Home 组件。这个默认路由将始终在访问根URL时渲染。...嵌套路由 在React Router中,嵌套可以被视为在路由之间建立父子连接。这可以用来组织共享相同URL路径的路由。...在此之后, 组件将被放置在下方,因为这是嵌套路由组件将被渲染的位置。 嵌套路由有各种用途,比如层次化组织路由、代码效率、提高性能等。

    66031

    Next.js 14 初学者入门指南(上)

    Next.js的一些核心优势 服务端渲染(SSR):Next.js支持服务端渲染,这意味着可以在服务器上预渲染页面,然后将完全形成的HTML发送给客户端。...这种方式非常适用于当你需要构建像文档页面这样的复杂和灵活的路由结构时。通过使用双括号[[...slug]]语法,你可以创建一个能够捕获所有传入请求的动态路由,并且根据URL的不同部分呈现不同的内容。...根布局(Root Layout) 根布局是应用于所有路由的布局。你可以创建一个layout.js或layout.tsx文件来定义根布局,然后在其中包括所有页面共享的元素,如头部和底部。...> ); } 嵌套布局(Nested Layout) 嵌套布局用于特定的路由段,只有当这些路由段处于活动状态时,定义在内部的布局才会被渲染。...可维护性:将共享元素放在布局中可以简化页面组件,使其更专注于页面特定内容的渲染,从而提高代码的可维护性。 使用根布局和嵌套布局,你可以灵活地定义应用的页面结构,同时保持代码的清晰和组织性。

    1.6K10

    Vue-Router学习笔记,持续记录

    类似于服务端路由,前端路由实现起来其实也很简单,就是匹配不同的 url 路径,进行解析,然后动态的渲染出区域 html 内容。但是这样存在一个问题,就是 url 每次变化的时候,都会造成页面的刷新。...),通常可以将两类组件分开存放,便于管理。...匹配了就直接重定向 children,路由的嵌套路由 alias,路由的别名。允许定义类似记录副本的额外路由。这使得路由可以简写为像这种 /users/:id 和 /u/:id。 ...props,允许将参数作为 props 传递给由 router-view 渲染的组件。当传递给一个多视图记录时,它应该是一个与组件具有相同键的对象,或者是一个应用于每个组件的布尔值。...解决办法:router-view页面添加key,将fullPath作为每个页面的唯一值,当key值不同时,页面就会刷新

    9.3K40

    Vue 06.路由

    路由 定义 对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源; 对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash...var vm = new Vue({ el: '#app', router: routerObj // 将路由规则对象,注册到 vm 上,监听 URL 地址的变化,然后展示对应的组件 }...设置当前路由下的router-link链接的高亮(或其他样式)有两种方式 第一种:通过给默认激活的类加样式,即给router-link-active类加 第二种:给路由对象设置linkActiveClass...], linkActiveClass: 'myactive' }) 设置路由切换动画 将router-view标签放到transition标签内部,然后设置动画样式 ' }; 路由嵌套 使用路由匹配规则对象的 children 属性实现路由嵌套 下面例子功能为,点击/account的导航链接后,展示account组件,该组件包括登录注册导航链接和登录注册的组件

    57010
    领券