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

Angular2路由:如何从服务而不是routerLink导航到子视图?

在Angular2中,可以使用服务而不是routerLink来导航到子视图。要实现这一点,可以使用Router服务的navigate方法。

首先,在要导航到子视图的组件中,注入Router服务:

代码语言:typescript
复制
import { Router } from '@angular/router';

constructor(private router: Router) { }

然后,在需要导航的方法中,使用Router服务的navigate方法来导航到子视图。navigate方法接受一个包含路由路径和参数的数组作为参数。例如,要导航到名为child的子视图,可以使用以下代码:

代码语言:typescript
复制
navigateToChild() {
  this.router.navigate(['child']);
}

如果子视图有参数,可以将参数作为数组的第二个元素传递。例如,要导航到名为child的子视图,并传递一个名为id的参数,可以使用以下代码:

代码语言:typescript
复制
navigateToChildWithParam() {
  this.router.navigate(['child', { id: 1 }]);
}

这样就可以通过服务而不是routerLink导航到子视图了。

关于Angular2路由的更多信息,可以参考腾讯云的相关产品文档:

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

相关·内容

AngularDart 4.0 高级-路由概述 顶

它可以将浏览器URL解释为导航到客户端生成视图的指令。它可以将可选参数传递给支持视图组件,以帮助确定要呈现的具体内容。您可以将路由器绑定到页面上的链接,并在用户单击链接时导航到适当的应用程序视图。...-- Routed views go here --> 路由链接 现在,您已经配置了路由并提供了一个渲染它们的地方,但您如何导航? 该URL可以直接从浏览器地址栏中获得。...定义路由器如何根据URL模式导航到组件。 大多数路由由路径,路由名称和组件类型组成。 RouterOutlet 指示路由应该显示视图的指令()。...RouterLink 将可点击HTML元素绑定到路由的指令。 单击具有绑定到链接参数列表的routerLink指令的元素会触发导航。...如果您点击了浏览器的后退按钮而不是“返回”按钮,该应用程序也会将您返回到英雄列表。 Angular的应用程序像正常的网页导航一样更新浏览器的历史。 现在点击危机中心链接查看正在进行的危机列表。 ?

6.1K20
  • Angular2 之 路由与导航基础知识路由模块组件路由路由守卫

    导航是很简单的,只是不同页面之间的切换,路由是实现导航的一种。 一个url对应的一个页面,在angular2中是一个组件。定义一个规则。...设计的时候,先去 基础知识 大多数带路由的应用都要在index.html的标签下先添加一个元素,来告诉路由器该如何合成导航用的URL。...显示路由器生成的视图。...路由器支持多种守卫 用CanActivate来处理导航到某路由的情况。 用CanActivateChild处理导航到子路由的情况。 用CanDeactivate来处理从当前路由离开的情况。...链接参数数组 链接参数数组保存路由导航时所需的成分: 指向目标组件的那个路由的路径(path) 必备路由参数和可选路由参数,它们将进入该路由的URL e.g.我们可以把RouterLink指令绑定到一个数组

    3.3K10

    AngularDart4.0 英雄之旅-教程-07路由 顶

    将Dashboard绑定到导航结构中。 路由是导航的另一个名称。 路由是导航从视图到视图的机制。 分割AppComponent 当前的应用程序加载AppComponent并立即显示英雄列表。...添加路由 应该在用户点击按钮后显示英雄而不是自动显示。 换句话说,用户应该能够导航到英雄列表。 更新pubspec 使用Angular路由(angular_router)启用导航。...用户可以在应用程序周围进行导航,从仪表板到英雄详细信息,然后返回,从英雄列表到英雄详细信息,再次回到英雄。 你已经达到推动这个页面的所有导航要求。 风格化应用程序 该应用程序是功能,但它需要样式。...你走过的路 以下是您在此页面中所取得的成果: 您添加了Angular路由器来浏览不同的组件。 您了解了如何创建路由器链接来表示导航菜单项。 您使用路由器链接参数导航到用户选择的英雄的细节。...在下一页中,您将使用http从服务器检索到的数据替换模拟数据。

    17.6K30

    angular基础面试题_java web面试题

    PercentPipe :把数字转换成百分比字符串,根据本地环境中的规则进行格式化angualr angular路由配置: 路由配置在 app.route.ts 中 路由跳转方式 [routerLink...Angular 初始化完组件视图及其子视图或包含该指令的视图之后调用。...在ng..之后,只调用一次 ngAfterViewChecked:每当 Angular 做完组件视图和子视图或包含该指令的视图的变更检测之后调用, gAfterViewInit...父子组件传值 子组件暴露一个 EventEmitter 属性,当事件发生时,子组件利用该属性 emits(向上弹射)事件。父组件绑定到这个事件属性,并在事件发生时作出回应。...灵活的路由,具备延迟加载功能 更容易学习 angular1是全局监听,变量越多性能越差,angular2采用模块化监听,提升了性能 在Angular 2应用中,我们应该注意哪些安全威胁?

    13K50

    Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

    灵活的路由,具备延迟加载功能 更容易学习 3.  Angular 2中的路由工作原理是什么? 路由是能够让用户在视图/组件之间导航的机制。...在Angular2中,组件中发生的任何改变总是从当前组件传播到其所有子组件中。如果一个子组件的更改需要反映到其父组件的层次结构中,我们可以通过使用事件发射器api来发出事件。...如果应用程序较大时,我会考虑延迟加载而不是完全捆绑的应用程序。...但是预编译的应用程序会将所有模板和样式与组件对齐,因此到服务器的Http请求数量会更少。 更快的渲染:如果应用程序不是AOT编译,那么应用程序完全加载时,编译过程会发生在浏览器中。...感兴趣的同学,可以尝试构建一个“答题系统应用程序”,具体要求为: 有三个组成部分:测试视图、审查结果和显示结果 接受json格式的提问问题,你可以以预定义的格式从服务器发送json,Angular2测试应用需要在客户端呈现出答题界面

    17.4K80

    Vue的一些命名规则与SPA实现思路

    3.5 前面使用RouterLink和RouterView组件导航和显示 4. router-link相关属性   4.1 to      表示目标路由的链接        4.2 replace     ...设置 replace 属性的话,当点击时,会调用 router.replace() 而不是 router.push(),导航后不会留下 history 记录。      ...例如,我们从 /a 导航到一个相对路径 b,如果没有配置 append,则路径为 /b,如果配了,则为 /a/b   4.4 有时候想要 渲染成某种标签,例如 。...$mount('#app');   3.5 前面使用RouterLink和RouterView组件导航和显示 RouterLink组件导航. -->       从 /a 导航到一个相对路径 b,如果没有配置 append,则路径为 /b,如果配了,则为 /a/b      <base herf="${pageContext.request.contextPath

    1.9K10

    Vue3--学习记录

    介绍 在本篇文章中,我们将详细讲解如何使用Vue3,从基本概念到高级技巧,最终通过一个项目实战,让大家全面掌握Vue3开发技能。...onErrorCaptured(): 类似Vue 2的errorCaptured,用于捕获子组件抛出的错误。...>NewsRouterLink> 4.11 编程式导航 实际上这种写法用的更多一些 编程式路由导航是指在Vue应用中通过JavaScript代码来控制路由的导航,而不是通过HTML中的导航路径的情况下非常有用。 在Vue 3中,编程式路由导航可以通过Vue Router提供的方法来实现。...下面是一些常用的方法: 1、使用router.push() router.push()方法是最常用的编程式导航方法之一,用于导航到一个新的位置。它可以接受一个路由对象或一个相对路径作为参数。

    9400

    Angular 6.x 快速入门

    (1) 从 @angular/common/http 模块中导入 HttpClient; (2) 使用构造注入,注入 http 服务; (3) 调用 http 服务的 get() 方法,设置请求地址并发送...指令 为了让我们链接到已设置的路由,我们需要使用 routerLink 指令,具体示例如下: routerLink="/">首页 routerLink="/user...反之,我们的路径将在 URL 地址栏中显示,随后进行后续视图更新,以匹配 routerLink 中设置的值。...router-outlet 指令 该指令用于告诉 Angular 在哪里加载组件,当 Angular 路由匹配到响应路径,并成功找到需要加载的组件时,它将动态创建对应的组件,并将其作为兄弟元素,插入到...FormsModule, HttpClientModule, RouterModule.forRoot(ROUTES)], // ... }) export class AppModule { } 配置路由导航

    14.1K20

    Vue3最新Router带来哪些颠覆性变化?

    ,也不需刷新页面,而直接通过JS重新计算出匹配的路由渲染。...为实现单页应用,前端路由的需求也变重要。类似服务端路由,前端路由实现也简单,就是匹配不同 URL 路径,进行解析,然后动态渲染出区域 HTML 内容。但URL每次变化都会造成页面的刷新。...5 总结前后端开发模式演进:前端项目经历的从最初的嵌入到后端内部发布,再到如今前后端分离,也见证了前端SPA发展。前端路由实现的两种方式,即通过监听不同的浏览器事件,实现hash、history模式。.../App.vue'const app = createApp(App)app.use(router)app.mount('#app')路由视图渲染: 路由流程:配置路由表设置路由守卫组件中注入路由应用挂载路由视图渲染组件使用方式:声明式: 编程式: router.push

    26310

    Vuejs和其他前端框架的对比

    相同之处在于,两个框架都专注于UI层,其他的功能如路由、状态管理等都交由同伴框架进行处理。 而不同之处是在于它们如何关联它们各自的配套框架。...$watch(视图到模型),$scope.$apply(模型到视图)检测,内部调用的都是digest,当然也可以直接调用$scope.$digest进行脏检查。...比如,一个视频播放控件有几个子组件完成,子组件需要分享一个状态。这一点Angular2有原生的service injection pattern。而Vue则没有官方推荐。...测试Angular2一开始就设计好了如何对组件进行测试,而Vue组件虽然也很好写测试,但是没有官方推荐的唯一标准(当然,对视图是否需要测试还有待探讨)。...它最低能支持到 IE6,而 Vue 最低只能支持到 IE9。 随着时间的推移,Knockout 的发展已有所放缓,并且略显有点老旧了。

    3.8K110

    vue.js与其他前端框架的对比

    相同之处在于,两个框架都专注于UI层,其他的功能如路由、状态管理等都交由同伴框架进行处理。 而不同之处是在于它们如何关联它们各自的配套框架。...(模型到视图)检测,内部调用的都是digest,当然也可以直接调用scope.scope.digest进行脏检查。...比如,一个视频播放控件有几个子组件完成,子组件需要分享一个状态。这一点Angular2有原生的service injection pattern。而Vue则没有官方推荐。...测试Angular2一开始就设计好了如何对组件进行测试,而Vue组件虽然也很好写测试,但是没有官方推荐的唯一标准(当然,对视图是否需要测试还有待探讨)。...它最低能支持到 IE6,而 Vue 最低只能支持到 IE9。 随着时间的推移,Knockout 的发展已有所放缓,并且略显有点老旧了。

    4.2K80

    Angular 快速学习笔记(1) -- 官方示例要点

    添加路由 ,路由定义 会告诉路由器,当用户点击某个链接或者在浏览器地址栏中输入某个 URL 时,要显示哪个视图,因此路由包含两个属性: i. path:一个用于匹配浏览器地址栏中 URL 的字符串...ii. component:当导航到此路由时,路由器应该创建哪个组件 const routes: Routes = [ { path: 'heroes', component: HeroesComponent...(routerLink),在a里添加routerLink routerLink="/heroes">Heroes 默认路由 a. { path: '', redirectTo: '/...ActivatedRoute 保存着到lComponent 实例的路由信息,this.route.snapshot.paramMap.get('id') ii. location 是一个 Angular...'getHeroes', [])) ); } 模板绑定Observable $ 是一个命名惯例,用来表明 heroes$ 是一个 Observable,而不是数组

    3.6K00

    Angular 快速学习笔记(1) -- 官方示例要点

    添加路由 ,路由定义 会告诉路由器,当用户点击某个链接或者在浏览器地址栏中输入某个 URL 时,要显示哪个视图,因此路由包含两个属性: i. path:一个用于匹配浏览器地址栏中 URL 的字符串...ii. component:当导航到此路由时,路由器应该创建哪个组件 const routes: Routes = [ { path: 'heroes', component: HeroesComponent...(routerLink),在a里添加routerLink routerLink="/heroes">Heroes 默认路由 a. { path: '', redirectTo: '/...ActivatedRoute 保存着到lComponent 实例的路由信息,this.route.snapshot.paramMap.get('id') ii. location 是一个 Angular...'getHeroes', [])) ); } 模板绑定Observable $ 是一个命名惯例,用来表明 heroes$ 是一个 Observable,而不是数组

    3.7K50

    Angular2 :从 beta 到 release4.0 版本升级总结

    它可以向应用的依赖注入器中添加服务提供商。 具体请参考官方文档。...变更 拆分和新增了路由模块 ActivatedRoute:获取路由信息 路由事件实例,如NavigationEnd表示导航事件变更完毕,等 反正改了挺多的,请自行查询官方API文档…[捂脸] 新增路由模块...升级angular(v2.4.0)到(v4.1.1)版本后,左侧导航的状态定位失效 原因:升级后,router和component的hook顺序调整(仅根据个人观察,未经验证),导致组件状态未能在路由事件结束...无法从router里获取RouteParams的API。 原因:angular(v4.1.1)中,使用ActivatedRoute的API获取路由信息。...11.升级angular到(v4.1.1)版本后,等带动态src等属性触发error 原因:angular2启用安全无害化处理,为防止XSS等攻击,具体可参考官方文档安全。

    8.2K00
    领券