angular2-router3 | 易学教程

Want to prevent Component recreation while routing in Angular 2

阅读更多关于 Want to prevent Component recreation while routing in Angular 2

问题 Let's say we have two routes Dashboard and Profile . Dashboard has dynamic tabs feature like Google spreadsheet . I want to do some interactions(build charts, visualizing some data) creating tabs in the Dashboard . Now, if I route to Profile and then route back to Dashboard , I want to see what was before in those tabs in Dashboard . It means, I want to maintain the state in the client side. AFAIK while routing between components, it recreates components. Is it possible to make spreadsheet

Can't reload/refresh active route

阅读更多关于 Can't reload/refresh active route

问题 I have recently updated to the new RC3 and Router3alpha and it seems some things have changed. I noticed that a click on the link of an active route does no longer result in the component to be reloaded. How do I achieve this behaviour with the new router3? My link looks like <a [routerLink]="['/link1']">Link1</a> And to test I simply used a random number in ngOnInit: export class LinkoneComponent implements OnInit { public foo: number; constructor() {} ngOnInit() { this.foo = Math.floor(Math

Angular 2 routes current url with params

阅读更多关于 Angular 2 routes current url with params

问题 I'm trying to use Angular 2 rc-4 with new Router. export const appRoutes: RouterConfig =[ { path: "", component: HomeComponent, terminal: true, data: { title: "Home" } }, { path: "Users", component: UserListComponent, data: { title: "Users" } }, { path: "Users/:id", component: UserEditComponent, data: { title: "Edit User" } } ]; Then I subscribe to change route event. When event fires I want to find item from appRoutes The problem is with url with params: Users/:id I don't know how to compare

How to render the child route into the router-outlet of the parent`s parent

阅读更多关于 How to render the child route into the router-outlet of the parent`s parent

问题 AngularJS 1.x ui-router has the extreme flexible concept of viewports. They seem to me like named routes but offer much more flexibility. The routes with viewports are not divided into something like primary/aux routes. They are just put anywhere in the html with the ui-view and you can reference them by viewport name from your states/routes. Now with the new angular 2 router 3 by viktor savkin I can not find that flexibility because the <router-outlet> is directly put to the component, so it

Angular 2 throwing error: Outlet is not activated

阅读更多关于 Angular 2 throwing error: Outlet is not activated

问题 I have set up my app so that I have a Recipe Book which has a list of Recipies which when I click on a Recipe it then shows the Recipe Details in a nested route. This then also has a button that when clicked loads the ingredients in a nested route inside the Recipes Details . So far the routing seems to work, except when I try to navigate to another Recipe . If the Ingredients tray(route) is active then it will change Recipe and collapse the Ingredients Route, If I then try and navigate

How to specify auxiliary component for child route in angular2 router3

阅读更多关于 How to specify auxiliary component for child route in angular2 router3

I am using the new route3 and would like to know what is the URL syntax to specify a auxiliary component for a child route. I have following child route definition: const router: RouterConfig = [ { path: 'component-c', component: ComponentC, children: [ { path: 'auxPath', component: ComponentAux, outlet: 'aux'}, { path: 'c1', component: ComponentC1 } ] } ]; And the template for ComponentC is like @Component({ selector: 'component-c', template: ` <div>Child Route Component</div> <router-outlet></router-outlet> <router-outlet name="aux"></router-outlet> `, directives: [ROUTER_DIRECTIVES] }) URL

Angular 2 RC4 Router get intended route before activated

阅读更多关于 Angular 2 RC4 Router get intended route before activated

问题 I am trying to determine what the route is before it is activated so I can cache it and redirect the user back to that route after they have logged in. In the old beta router I was able to call ComponentInstruction.routeName in the activate hook but in the newer canActivate() guard I do not see a way to access the intended route before it is activated. I could store the intended route in a shared service when the user clicks on a navagtion button in my app but what about when they enter the

Angular 2 RC4 Router get intended route before activated

阅读更多关于 Angular 2 RC4 Router get intended route before activated

I am trying to determine what the route is before it is activated so I can cache it and redirect the user back to that route after they have logged in. In the old beta router I was able to call ComponentInstruction.routeName in the activate hook but in the newer canActivate() guard I do not see a way to access the intended route before it is activated. I could store the intended route in a shared service when the user clicks on a navagtion button in my app but what about when they enter the URL in the address bar? From angular router source files: export interface CanDeactivate<T> {

How can I specify query parameters by routerLink directive

阅读更多关于 How can I specify query parameters by routerLink directive

I am experimenting the new router (version 3.0.0-alpha.7) and would like to know how to specify query parameters by routerLink directive? The Router.navigate() method below generates a URL like http://localhost:3000/component-a?x=1 this.router.navigate(['/component-a'], {queryParams: {x: 1}}); However, I can't figure out how to do the same thing with the routerLink directive. Template like below returns parser error... <a [routerLink]="['/component-a'], {queryParams: {x: 1}}">Component A</a> And the closest thing I can get is http://localhost:3000/component-a;x=1 , which uses the syntax for

How to handle hash fragments from oauth redirect urls in Angular2 rc3 routing

阅读更多关于 How to handle hash fragments from oauth redirect urls in Angular2 rc3 routing

I'm trying to find a way to handle setting up an Angular2 Typescript route (using the 3.0.0-alpha.8 router) that will handle routes that begin with hash fragments. The app I'm working on handles all login externally (something I have no control over) through a rails backend with oauth2. Redirecting users to the external login page works fine but when the redirect url, always some form of http://localhost:4200#access_token=TOKEN (where TOKEN is a series of numbers and letters) is sent back but I can't figure out how to set up a route that can handle the # sign so I can catch it and redirect to