angular2-routing | 易学教程

Navigating to the same route not refreshing the component?

阅读更多关于 Navigating to the same route not refreshing the component?

问题 I've upgraded to use the new Angular 2 router from router-deprecated and some behavior has changed. The page I'm having issues with is a search page. We've chosen to put all the search terms in the URL using the HashLocationStrategy . The routes look like this: const routes: RouterConfig = [ { path: '', component: HomeComponent }, { path: 'search/:term/:cat/:page/:sort/:size/:more', component: HomeComponent }, { path: 'search/:term/:cat/:page/:sort/:size', component: HomeComponent }, { path:

How to pass query parameters with a routerLink

阅读更多关于 How to pass query parameters with a routerLink

I want to pass a query parameter prop=xxx . This didn't work <a [routerLink]="['/somepath', {queryParams: {prop: 'xxx'}}]>Somewhere</a> 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]="{ exact: false }" To pass query parameters to this.router.navigate(...) use let navigationExtras:

Error: Uncaught (in promise): Error: Cannot match any routes Angular 2

阅读更多关于 Error: Uncaught (in promise): Error: Cannot match any routes Angular 2

问题 Error I am implemented nested routing in my app. when application loads its shows login screen after login its redirect to admin page where further child routes exist like user, product, api etc. now when I navigate to admin it byddefault loads user screen but further <routeLinks> not working and its shows this error. Error: Uncaught (in promise): Error: Cannot match any routes: 'product' After Click Product it shows this Code main.ts import { bootstrap } from '@angular/platform-browser

Show activity Indicator while loading a lazy loaded Module in Angular 2

阅读更多关于 Show activity Indicator while loading a lazy loaded Module in Angular 2

问题 My scenario is as follows. I have a menu, with multiple options. Each menu should be shown depending on user permissions (already solved), most menu items are encapsulated as modules, and most of the modules are lazy loaded, so when a user clicks a menu item the first time, it loads (up to here everything works well), now my requirement is, in order to give a better user experience, I need to show activity indicator after user clicks a menu item while the lazy loaded module is loading. Up to

Angular2 routing canActivate and AuthGuard (JWT) with user role parameter

阅读更多关于 Angular2 routing canActivate and AuthGuard (JWT) with user role parameter

问题 In this exaple project with JWT authentication we se how to allow only authenticated users to some route: import { RouterConfig } from '@angular/router'; import { Home } from './home'; import { Login } from './login'; import { Signup } from './signup'; import { AuthGuard } from './common/auth.guard'; export const routes: RouterConfig = [ { path: '', component: Login }, { path: 'login', component: Login }, { path: 'signup', component: Signup }, { path: 'home', component: Home, canActivate:

CanActivate vs. CanActivateChild with component-less routes

阅读更多关于 CanActivate vs. CanActivateChild with component-less routes

问题 The angular2 documentation about Route Guards left me unclear about when it is appropriate to use a CanActivate guards vs. a CanActivateChild guard in combination with component-less routes. TL;DR: what's the point in having canActivateChild when I can use a component-less routes with canActivate to achieve the same effect? Long version: We can have multiple guards at every level of a routing hierarchy. The router checks the CanDeactivate and CanActivateChild guards first, from deepest child

RouterLink does not work

阅读更多关于 RouterLink does not work

问题 My routing in the angular2 apps works well. But i am going to make some routeLink based on this: Here is my routing: const routes: RouterConfig = [ { path:'home' , component: FormComponent }, { path:'about', component: AboutComponent }, { path:'**' , component: FormComponent } ]; And here is the links that i made: <ul class="nav navbar-nav item"> <li> <a routerLink='/home' routerLinkActive="active">Home</a> </li> <li> <a routerLink='/about' routerLinkActive="active">About this</a> </li> </ul>

Angular 2 How to redirect to 404 or other path if the path does not exist [duplicate]

阅读更多关于 Angular 2 How to redirect to 404 or other path if the path does not exist [duplicate]

问题 This question already has an answer here : Handling 404 with Angular2 (1 answer) Closed 9 months ago . I was trying to redirect 404 / other path if the path does not exist in angular 2 I tried research there is some method for angular 1 but not angular 2. Here is my code : @RouteConfig([ { path: '/news', name: 'HackerList', component: HackerListComponent, useAsDefault: true }, { path: '/news/page/:page', name: 'TopStoriesPage', component: HackerListComponent }, { path: '/comments/:id', name:

Angular2: Loading modules dynamically from a given folder

阅读更多关于 Angular2: Loading modules dynamically from a given folder

问题 app |-plugins |-plugin1 |-config.json |-plugin1.module.ts |-plugin1.component.ts |-plugin2 |-config.json |-plugin2.module.ts |-plugin2.component.ts As you can see above, I have "app/plugins" folder, which contains plugins. Each plugin will contain one "config.json" file which will tell some configuration including - { path: "feature1", moduleFile: "feature1.module", moduleClassName: "Feature1Module" } So what I want is, before application bootstrap it will scan the "app/plugins" folder and

How to use the HashLocationStrategy with the Auth0 Lock widget for user login

阅读更多关于 How to use the HashLocationStrategy with the Auth0 Lock widget for user login

After updating the Auth0 login sample to use HashLocationStrategy in app.module.ts : import { LocationStrategy, HashLocationStrategy } from '@angular/common'; // (...) @NgModule({ providers: [ {provide: LocationStrategy, useClass: HashLocationStrategy}, appRoutingProviders, AUTH_PROVIDERS ], //(...) The Auth0 Lock authenticated event is not raised anymore: import { Injectable } from '@angular/core'; import { tokenNotExpired } from 'angular2-jwt'; // Avoid name not found warnings declare var Auth0Lock: any; @Injectable() export class Auth0Service { // Configure Auth0 lock = new Auth0Lock(