angular2-routing

问题 Hi I am trying to define the Angular 2 route paths pragmatically. I have a service that returns the paths, all the paths use a common component for routing the service is shown below, (all paths are generated dynamically) export class PagesService{ getPages() :string[] { return [{"slug": 'john',"name": 'John'},{"slug": 'martin',"name": 'Martin'},{"slug": 'alex',"name": 'Alex'},{"slug": 'susan',"name": 'Susan'}] } } The routing component, @Component({ selector : 'app', template : ` <router

问题 I have the following tab structure in my page, with it's respective URLs given in braces: Main Tab (/page) / | \ / | \ / | \ / | \ Sub Tab 1 Sub Tab 2 Sub Tab 3 (/page/a) (/page/b) (/page/c) Component @Input() route: string = ''; selectTab(tab) { let route = this.router.url.split('?')[0]; /* Here redirectUrl = "/page/c" */ if (tab.redirectUrl.length > 0) { // console.log(tab.redirectUr); gives /page/c this.router.navigate([tab.redirectUrl]); // This works but reloads the page and is a very

问题 AoT compilation resulting in " JavaScript heap out of memory" error I am trying to compile my project by following the AoT guide available on angular.io Below is my typesccript configuration file for aot { "compilerOptions": { "emitDecoratorMetadata": true, "experimentalDecorators": true, "module": "es2015", "moduleResolution": "node", "noImplicitAny": false, "suppressImplicitAnyIndexErrors": true, "noEmitOnError": true, "removeComments": true, "sourceMap": false, "target": "es5", "outDir": "

问题 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

问题 I am looking for a way to have different routing for mobile and desktop resolution. I have mater detail page layout. So when the user moves to mobile, user should see master list & when user clicks item of the list, it should navigate to the details page. I am thinking there will be 2 sets of routes for desktop and mobile & I will need to load correct route config based on width. Please suggest. For desktop: const appDesktopRoutes:Routes =[ { path: '', component: ItemListComponent, children:

问题 Consider this code: @NgModule({ imports: [RouterModule.forRoot([ { path: 'about', component: AboutComponent }, { path: '', loadChildren: 'app/admin.module#AdminModule', canLoad: [AuthGuard] }, { path: '', component: HomeComponent, canActivate: [HomeGuard] }, ])], providers: [ AuthGuard, // return true if user is Authorized HomeGuard // return true if user is NOT Authorized ] }) export class AppRoutingModule { } @NgModule({ imports: [RouterModule.forChild([ { path: '', component:

问题 I have Spring Boot Application (backend) and for the Frontend I am using the Angular 2 Single Page Application. Whenever I navigate to a route for example: localhost:8080/getAccounts and do after the navigation a refresh I get the Whitelabel Error Page. If I am at the root localhost:8080 I works fine. The problem only occurs in the sub links. Returning (use the return/back button) to the previous page also works fine. Just the refresh. I also can not call direct the link: localhost:8080

问题 I am trying to implement passwordless authentication with Auth0 and angular2 (2.0.0-rc.6), using angular2-webpack-starter and auth0-lock-passwordless. The form displays normally, and the authentication e-mail is sent using this code: this.lock.magiclink({ callbackURL:"http://localhost:3000/#/sandbox" }); The issues occur after I click the magic link in the e-mail: Even though the redirect_uri of the magic link seems correct (redirect_uri=http%3A%2F%2Flocalhost%3A3000%2F%23%2Fsandbox), it is

问题 I have a very simple app My app.component.html looks like this: <a [routerLink]="['/Test']">CLICK ME</a> <div class="main-container"> <router-outlet></router-outlet> </div> My app.component.ts looks like this: @Component({ selector: 'app', templateUrl: 'app/app.component.html', directives: [HomeComponent, TestComponent, ROUTER_DIRECTIVES] }) @RouteConfig([ {path: '/', component: HomeComponent, as: 'HomeComponent'}, {path: '/test', component: TestComponent, as: 'Test'} ]) export class

问题 I have the following plunker, which does not work. In order to get it to work I can comment out... RouterModule.forRoot([ { path: "", component: TestComponent, children: [ // { // path:"", // outlet: "other", // component: TestComponent // } ] } ]) If I don't do that I get... EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL Segment: '' Error: Cannot match any routes. URL Segment: '' How do I add a child route? 回答1: You should give different path names until you use