angular2-routing | 易学教程

Angular2 RC1 child routes defined but not recognized

阅读更多关于 Angular2 RC1 child routes defined but not recognized

What used to work for beta /... is no longer working. With the new new RC1 router, how do I do the child routing? Folder structure app |--home/ | |--home.component.ts |--login/ | |--login.ts |--appShell/ | |--app.component.ts |--apps/ |--hero/ |--hero-shell.component.ts |--horees.component.ts |--hero-detail.component.ts The planned navigation is app.component -> home.component -> heroshell.component -> heroes.component app.component.ts routes @Routes([ { path: '/heroshell', component: HeroShellComponent }, { path: '/home', component: HomeComponent }, { path: '/login', component: Login }, ])

Angular2: how to “reload” page with router (recheck canActivate)?

阅读更多关于 Angular2: how to “reload” page with router (recheck canActivate)?

I have routers with canActivate: [ AuthGuard ] and validation inside AuthGuard How to force check canActivate in same router url ? For example: Current route is /admin and I have got event like session expired . I have session check in AuthGuard but this check activates only when I execute .navigate(...) . How to force run canActivate in same location? I've tried: this.router.navigate([ this.router.url ]); but angular checks same location and do nothing. p.s. I can locate to "login page" or other pages when I got session expired event , but I have all redirects inside AuthGuard and I do not

Navigate relative with Angular 2 Router (Version 3)

阅读更多关于 Navigate relative with Angular 2 Router (Version 3)

问题 How to navigate relative from /questions/123/step1 to /questions/123/step2 within a component using Router without string concatenation and specifying /questions/123/ ? I've added an own answer below. Please feel free to suggest a better answer. ;-) I guess there are better approaches. 回答1: After doing some more research I came across with this.router.createUrlTree(['../step2'], {relativeTo: this.activatedRoute}); and this.router.navigate(['../step2'], {relativeTo: this.activatedRoute});

Angular2 Routerlink: add query parameters

阅读更多关于 Angular2 Routerlink: add query parameters

问题 How can I add query parameters to routerLink ? @RouteConfig { {path: '/search', name: 'Search', component: SearchCmp} } Let' say I want to route to /search?q=asdf , <a [routerLink]= " [ '/Search' , {q= 'asdf'}] ">Link 1</a> this resolves to /search . Is there a way to add query parameters without using: this.router.navigate( ['Search', { q: 'asdf'}]); or <a href="/search?a=asdf"> Link 2 </a> ? 回答1: If u need something as /search?q=asdf than you can simply use: @RouteConfig { {path: '/search',

Targeting named outlet via routerLink adds extraneous “/”

阅读更多关于 Targeting named outlet via routerLink adds extraneous “/”

I'm trying to launch a modal in my app via routing. Everything seems to work except that an extra slash is added to the URL that prevents it from resolving. The Url should look like this (and it works if I enter it manually)... /accounts(modal:accounts/1/edit) but i'm getting this instead (notice the slash between the base url and outlet target)... /accounts/(modal:accounts/1/edit) The base tag is set... <head> <meta charset="utf-8"> <title>myApp</title> <base href="/"> ... </head> Here's my routing config (accounts-routing.module.ts) const ACCOUNT_ROUTES: Routes = [ { path: 'accounts',

How do I Mock RouterStateSnapshot for a Router Guard Jasmine test

阅读更多关于 How do I Mock RouterStateSnapshot for a Router Guard Jasmine test

I have a simple router guard and I am trying to test the canActivate( route: ActivatedRouteSnapshot, state: RouterStateSnapshot ) . I can create the ActivatedRouteSnapshot like this new ActivatedRouteSnapshot() but I cannot figure out how to create a mocked RouterStateSnapshot . Per the code I tried... let createEmptyStateSnapshot = function( urlTree: UrlTree, rootComponent: Type<any>){ const emptyParams = {}; const emptyData = {}; const emptyQueryParams = {}; const fragment = ''; const activated = new ActivatedRouteSnapshot(); const state = new RouterStateSnapshot(new TreeNode

Angular2 - router-outlet with login structure

阅读更多关于 Angular2 - router-outlet with login structure

I'm building angular2 app and currently I have an home component with navbar, toolbar and router-outlet for the main content. I want to add one extra page for the login mechanism, so if the user is not authenticated the login page will be displayed in the entire screen and after login to user will be navigated to the component with the structure above. How can I manage this structure? Do I need two router outlets? the first one for the navigation between login and home pages and one for the main content in the home page? Any other common structure which is more simple than two router outlets?

How can I change a specific, internal route parameter in Angular2

阅读更多关于 How can I change a specific, internal route parameter in Angular2

I am building a calendar that can display different kinds of data. The following example explains my URL structure I think: todo/2017/01/01 a day view of todos birthdays/2017/01/01 a day view of birthdays todo/2017/01 a month view of todos birthdays/2017/01 a month view of birthdays todo/2017 a year view of todos birthdays/2017 a year view of birthdays Up until now I have be able to pass in a Date object and reroute via this.router.navigate([#HARDCODED# 'todo' #OR# 'birthday', year, ?month, ?day]) The problem is that I want to be able to navigate from todo/2017/01/01 => birthdays/2017/01/01 OR

Executing resolvers one after the other in Angular 2+

阅读更多关于 Executing resolvers one after the other in Angular 2+

Given the following route: path: '', component: MyComponent, resolve: { foo: FooResolver, bar: BarResolver } Is there any way of telling angular to execute the first resolver FooResolver , and only execute the second resolver BarResolver once the first one has finished? Resolvers are resolved in parallel. If Foo and Bar are supposed to be resolved in series they should be a single FooBar resolver. If they are supposed to be used by themselves in other routes, FooBar can wrap Foo and Bar resolvers: class FooBarResolver implements Resolve<{ foo: any, bar: any }> { constructor( protected

How to pass and get parameter with routerLink in Angular 2?

阅读更多关于 How to pass and get parameter with routerLink in Angular 2?

I want to pass a value with url using routerLink. And read that value on another page. Like I have product list. On select of first record the id of that record pass to product detail page. After read that productId I want to show detail of that product. So How can I pass and get the parameter? Tiep Phan I'm assuming you have some code like this: { path: 'product/:id', component: ProductDetailComponent } in ProductList template <a [routerLink]="['/product', id]">Home</a> or <a [routerLink]="['/product', 5]">Home</a> where id is a variable, maybe you got it in a loop. in ProductDetailComponent: