首页
学习
活动
专区
工具
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.2K10

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

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

17.5K30

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

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

17.3K80

angular基础面试题_java web面试题

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

13K50

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组件导航和显示       <!...例如,我们 /a 导航一个相对路径 b,如果没有配置 append,则路径为 /b,如果配了,则为 /a/b      <base herf="${pageContext.request.contextPath

1.9K10

Angular 6.x 快速入门

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

14.1K20

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.1K80

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

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

3.6K50

Vue3中 router 带来了哪些变化?

router.getMatchedComponents 返回目标位置或是当前路由匹配的组件数组 (是数组的定义/构造类,不是实例)。通常在服务端渲染的数据预加载时使用。...,将会引发错误,不是导航路由 "/" 并且不显示任何内容。...在 vue2-router 中,当 push 一个不存在的命名路由时,路由导航路由 "/" 下,并且不会渲染任何内容。...但是,Bar 页面也有分页,选择第二页时,会导航 /pages/foo/bar?page=2。vue2-router 默认情况下,路由匹配规则是「包含匹配」。...$route - 当前激活的路由信息对象。 但是 3.0 中,没有 this,也就不存在在 this.router | route 这样的属性,那么在 3.0 中应该如何使用这些属性呢?

3K50

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.1K00

Angular 入坑挖坑 - 路由守卫连连看

对应官方文档地址: 路由导航 配套代码地址:angular-practice/src/router-combat 二、Contents Angular 入坑弃坑 - Angular 使用入门 Angular...入坑挖坑 - 组件食用指南 Angular 入坑挖坑 - 表单控件概览 Angular 入坑挖坑 - HTTP 请求概览 Angular 入坑挖坑 - Router 路由使用入门指北...Angular 入坑挖坑 - 路由守卫连连看 三、Knowledge Graph ?...UrlTree:取消当前的导航,并导航路由守卫返回的这个 UrlTree 上(一个新的路由信息) 4.2.1、CanActivate:认证授权 在实现路由守卫之前,可以通过 Angular CLI...当问题解决后,就可以针对 crisis 模块设置惰性加载 在配置惰性路由时,我们需要以一种类似于子路由的方式进行配置,通过路由的 loadChildren 属性来加载对应的模块,不是具体的组件,修改后的

3.7K30

Vue04路由--SPA+ 使用路由建立多视图单页应用+router-link相关属性+【面试题:js中const,var,let区别】

使用路由建立多视图单页应用         3.1 引入依赖库         3.2 创建自定义组件         3.3 创建路由 3.3.1 什么是路由 3.3.2 定义路由         3.4...创建和挂载根实例         3.5 使用RouterLink和RouterView组件导航与显示 4. router-link相关属性         4.1 to         4.2 replace...$mount("#app");    3.5 使用RouterLink和RouterView组件导航与显示 go to Home 上面的示例已经使用,to既可以使用字符串,也可以使用js表达式       4.2 replace 设置 replace 属性的话,当点击时,会调用 router.replace() 不是...例如,我们 /a 导航一个相对路径 b,如果没有配置 append,则路径为 /b,如果配了,则为 /a/b (路径追加) <router-link :to="{ path: 'relative

2.5K30
领券