angular2-routing

How to pass query parameters with a routerLink

由 柔情痞子 提交于 2019-11-26 15:27:41
问题 I want to pass a query parameter prop=xxx . This didn't work <a [routerLink]="['/somepath', {queryParams: {prop: 'xxx'}}]>Somewhere</a> 回答1: queryParams queryParams is another input of routerLink where they can be passed like <a [routerLink]="['../']" [queryParams]="{prop: 'xxx'}">Somewhere</a> fragment <a [routerLink]="['../']" [queryParams]="{prop: 'xxx'}" [fragment]="yyy">Somewhere</a> routerLinkActiveOptions To also get routes active class set on parent routes: [routerLinkActiveOptions]="

How to redirect to an external URL in Angular2?

由 微笑、不失礼 提交于 2019-11-26 15:10:32
What is the method for redirecting the user to a completely external URL in Angular 2. For example, if I need to redirect the user to an OAuth2 server in order to authenticate, how would I do that? Location.go() , Router.navigate() , and Router.navigateByUrl() are fine for sending the user to another section (route) within the Angular 2 app, but I can't see how they could be used to redirect to an external site? Dennis Smolek You can use this-> window.location.href = '...'; This would change the page to whatever you want.. Brian An Angular approach to the methods previously described is to

Angular 2 router event listener

由 半世苍凉 提交于 2019-11-26 14:26:48
How to listen state change in Angular 2 router? In Angular 1.x I used this event: $rootScope.$on('$stateChangeStart', function(event,toState,toParams,fromState,fromParams, options){ ... }) So, if I use this eventlistener in Angular 2: window.addEventListener("hashchange", () => {return console.log('ok')}, false); it isn't return 'ok', then change state from JS, only then browser history.back() function run. Use router.subscribe() function as the service: import {Injectable} from 'angular2/core'; import {Router} from 'angular2/router'; @Injectable() export class SubscribeService { constructor

New Angular2 router configuration

由 馋奶兔 提交于 2019-11-26 14:17:57
问题 Back when using the deprecated router I was able to do a router.config and pass in an object. Thing is, the router itself got configured a bit after the app was started, the object had the same "template" as if I'd used the @RouterConfig. What I'm looking for is if there is a way to config the new router like this. Been looking through the documentation but I'm a bit at a loss since it isn't documented yet. Edit due to answer No, I can't use @Routes. Thing is I'm loading the configuration

Autoscroll in Angular 2

由 爱⌒轻易说出口 提交于 2019-11-26 14:06:38
问题 I'm experiencing an issue with Angular 2 where changing from one route to another does not automatically scroll to the top of the new view. I realize that Angular 1 allowed for an autoscroll property to be added to an HTML element, and others had come up with some simple javascript (such as window.scroll(0, 0) ) to force views to scroll to the top when loaded. However, I am not sure how to accomplish this with Angular 2. Does anyone know how to achieve this? 回答1: update Currently there is no

PathLocationStrategy vs HashLocationStrategy in web apps

由 随声附和 提交于 2019-11-26 13:59:23
问题 What are the pros and cons of using: PathLocationStrategy - the default "HTML 5 pushState" style. HashLocationStrategy - the "hash URL" style. for instance, using HashLocationStrategy will prevent the feature of scrolling to an element by its #ID, but some 3rd party plugins require the HashLocationStrategy or the Hashbang #! in order to work in ajax websites. I would like to know which one offers more for a webapp. 回答1: For me the main difference is that the PathLocationStrategy requires a

Angular2 router keep query string

由 蹲街弑〆低调 提交于 2019-11-26 12:57:14
问题 I wrote an Angular2 (v2.0.1) application that makes use of the router. The website is loaded with several query string parameters, so the full URL initially looks like this: https://my.application.com/?param1=val1&param2=val2&param3=val3 In my route configuration, I have an entry which redirects an empty route: const appRoutes: Routes = [ { path: \'\', redirectTo: \'/comp1\', pathMatch: \'full\' }, { path: \'comp1\', component: FirstComponent }, { path: \'comp2\', component: SecondComponent }

How to get current route

由 本小妞迷上赌 提交于 2019-11-26 12:43:51
The current docs only talk about getting route params, not the actual route segments. For example, if i want to find the parent of current route, how is that possible? The new V3 router has a url property. this.router.url === '/login' lowcrawler Angular RC4: You can import Router from @angular/router Then inject it: constructor(private router: Router ) { } Then call it's URL parameter: console.log(this.router.url); // /routename Inject Location to your component and read location.path(); You need to add ROUTER_DIRECTIVES somewhere so Angular can resolve Location . You need to add import:

Angular 2 passing object via route params possible?

由 我的未来我决定 提交于 2019-11-26 12:30:48
问题 I could use some advice how to approach this problem I\'m facing. To explain this best possible for you I have created a main component: @Component({ selector: \'main-component\', providers: [...FORM_PROVIDERS, MainService, MainQuoteComponent], directives: [...ROUTER_DIRECTIVES, CORE_DIRECTIVES, RouterOutlet, MainQuoteComponent ], styles: [` agent { display: block; } `], pipes: [], template: ` **Html hidden** `, bindings: [MainService], }) @RouteConfig([ { path: \'/\', name: \'Main\',

Warn user of unsaved changes before leaving page

由 ↘锁芯ラ 提交于 2019-11-26 12:15:16
问题 I would like to warn users of unsaved changes before they leave a particular page of my angular 2 app. Normally I would use window.onbeforeunload , but that doesn\'t work for single page applications. I\'ve found that in angular 1, you can hook into the $locationChangeStart event to throw up a confirm box for the user, but I haven\'t seen anything that shows how to get this working for angular 2, or if that event is even still present. I\'ve also seen plugins for ag1 that provide
订阅 angular2-routing