angular2-router

How to make Angular 2 remember scroll position?

由 孤人 提交于 2019-12-10 11:22:27
问题 I'm on page 1, I scroll halfway through the page and then click a link that brings me to page 2 through the Angular router. When I hit the "back" button, I'd like page 1 to be scrolled halfway down, just like it was before I left that page. What is the easiest way to do that? 回答1: Save to localStorage scroll position in ngOnDestroy() , and restore it in ngOnInit() 来源： https://stackoverflow.com/questions/42439745/how-to-make-angular-2-remember-scroll-position

How to use HashLocationStrategy for router in angular2-beta.20 in dart?

由 本小妞迷上赌 提交于 2019-12-08 05:23:20
问题 I tried to use the router in angular2-beta.20 in Dart with the HashLocationStrategy. But I couldn't find any docs, except for this link to angular2-beta.15 docs, which are incomplete. The example shows TypeScript imports instead of Dart ones. So I tried to import package:angular2/router.dart , but the Dart Analyzer keeps complaining that it can not find LocationStrategy and HashLocationStrategy Also I don't know, how to write the import exactly, because a top-level provide function, as in the

How to refresh a route's resolved data

由 ≯℡__Kan透↙ 提交于 2019-12-06 18:00:03
问题 Consider the following route configuration: const routes: Routes = [ { path: '', component: AppComponent, resolve: { app: AppResolver }, children: [ { path: 'user/:uid', resolve: { user: UserResolver }, children: [ { path: '', component: ViewUserComponent }, { path: 'edit', component: EditUserComponent } ] } ] } ]; The user data are retrieved by UserResolver for any children of route /user/:uid . Using this data, a user profile can be viewed by navigating to /user/:uid and then edited by

Angular: append query parameters to URL

由 瘦欲@ 提交于 2019-12-03 07:11:57
问题 Im using this: import { HttpParams } from '@angular/common/http'; let params = new HttpParams(); params.append('newOrdNum','123'); But this is not working, i dont append param in url. Any suggestion? 回答1: This could be archived by using the Router class: Using a component: import { Router, ActivatedRoute } from '@angular/router'; @Component({}) export class FooComponent { constructor( private _route: ActivatedRoute, private _router: Router ){} navigateToFoo(){ // changes the route without

Angular 2: How to conditionally load a Component in a Route asynchronously?

由 …衆ロ難τιáo~ 提交于 2019-12-03 03:47:33
问题 I'd like to attach a component to a route asynchronously, given a condition . The following example, which works (but is asynchronous), loads one component or another depending on the user role: import { UserDashboardComponent } from './user-dashboard.component' import { AdminDashboardComponent } from './admin-dashboard.component' const role = 'admin' // Just for the example const comp = role === 'admin' ? AdminDashboardComponent : UserDashboardComponent const routes: Routes = [ { path: '',

Angular: append query parameters to URL

由 杀马特。学长 韩版系。学妹 提交于 2019-12-03 02:31:51
Im using this: import { HttpParams } from '@angular/common/http'; let params = new HttpParams(); params.append('newOrdNum','123'); But this is not working, i dont append param in url. Any suggestion? Jota.Toledo This could be archived by using the Router class: Using a component: import { Router, ActivatedRoute } from '@angular/router'; @Component({}) export class FooComponent { constructor( private _route: ActivatedRoute, private _router: Router ){} navigateToFoo(){ // changes the route without moving from the current view or // triggering a navigation event, this._router.navigate([], {

Angular 2 rc3 router-deprecated package issue

由 让人想犯罪 __ 提交于 2019-12-01 17:33:07
Welcome Angular 2 rc.3! I use project.json from 5 Min Quickstart to configure my project, but when i run npm install i get follow error: No compatible version found: @angular/router-deprecated@2.0.0-rc.3 Valid install targets: 2.0.0-rc.2, 2.0.0-rc.1, 2.0.0-rc.0, 0.0.0-7, 0.0.0-6 Does anyone know what reason of that? Maybe quickstart doc out-of-date? I think so its by mistake try the last version of release "@angular/router-deprecated": "2.0.0-rc.2", Angular2 RC3 brings back the new router. But the Tutorial continues to mention router-deprecated. Check out the Developer guide which has

How can I specify query parameters by routerLink directive

由 余生长醉 提交于 2019-12-01 17:12:14
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

Angular 2 rc3 router-deprecated package issue

由 断了今生、忘了曾经 提交于 2019-12-01 16:40:16
问题 Welcome Angular 2 rc.3! I use project.json from 5 Min Quickstart to configure my project, but when i run npm install i get follow error: No compatible version found: @angular/router-deprecated@2.0.0-rc.3 Valid install targets: 2.0.0-rc.2, 2.0.0-rc.1, 2.0.0-rc.0, 0.0.0-7, 0.0.0-6 Does anyone know what reason of that? Maybe quickstart doc out-of-date? 回答1: I think so its by mistake try the last version of release "@angular/router-deprecated": "2.0.0-rc.2", 回答2: Angular2 RC3 brings back the new

How to handle multiple queryParams in Angular2

由 别等时光非礼了梦想. 提交于 2019-12-01 06:44:39
I'm trying to implement a filtering mechanism in a new Angular2 app, that would allow me to filter a list of entries in an array. The entries may have around 20 properties that could be filtered on. I have so far created a list of filters in one component and then a list component that is routed to, as a child. I then planned to pass the filters as queryParams through the router. Starting with just one filter this was fine: On the send side I had: this.router.navigate(['/findlist'], {queryParams: {'g': myParam}}); The on the receive side, I had: this.subscription = this.route.queryParams
订阅 angular2-router