首页
学习
活动
专区
工具
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
  • 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值做不同处理。

    38430

    瑜亮之争:Vue与React差异

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

    1.3K20

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

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

    1.8K20

    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

    超燃|从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 提供了嵌套路由支持,通过在父路由中定义子路由规则,我们可以在页面中嵌套加载不同组件。

    18910

    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

    44430

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

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

    53631

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

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

    1.2K10

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

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

    9.2K40

    一文带你进入微前端世界

    什么是微前端 微前端(Micro-Frontends)是一种类似于微服务架构,它将微服务理念应用于浏览器端,即将 Web 应用由单一单体应用转变为多个小型前端应用聚合为一应用。...微前端实现方案对比 Nginx路由转发 通过Nginx配置反向代理来实现不同路径映射到不同应用,例如www.abc.com/app1对应app1,www.abc.com/app2对应app2,这种方案本身并不属于前端层面的改造...,更多是运维配置 优点: 简单,快速,易配置 缺点: 在切换应用时会触发浏览器刷新,影响体验 iframe嵌套 父应用单独是一个页面,每个子应用嵌套一个iframe,父子通信可采用postMessage...则更加灵活,直接子应用打出来 HTML 作为入口,主框架可以通过 fetch html 方式获取子应用静态资源,同时 HTML document 作为子节点塞到主框架容器中。...这种方案可以通过 import-html-entry[2] 完成 JavaScript Entry。通常是子应用资源打成一个 entry script。

    1K10

    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组件,该组件包括登录注册导航链接和登录注册组件

    56210

    Vue Router——路由

    = router 1.2 SPA与前端路由 SPA指的是一个web网站只有一个唯一HTML页面,所有组件展示与切换都在这唯一一个页面内完成。...此时,不同组件之间切换需要通过前端路由来实现。 结论:在SPA项目中,不同功能之间切换,要依赖于前端路由来完成。 而前端路由通俗易懂概念就是:Hash地址与组件之间对应关系。...可以通过如下两种方式,激活路由链接进行高亮显示 使用默认高亮class 自定义路由高亮class 3.2.1 默认高亮class 被激活路由链接,默认会应用一个叫做router-link-active...通过路由实现组件嵌套展示,叫做嵌套路由。...//路由动态参数以:进行声明后,冒号后面的是动态参数名称 { path:'/movie/:id', component:Movie } //已下3个路由规则,合并成了一个,提高路由规则复用性

    1.2K20
    领券