angular2-routing

问题 i want to provide value of [router-link],path,component,and as dynamically. <li><a [routerLink]="['/SettingStudent']">Settings</a></li> { path: '/settings', component:Settings, name:'SettingStudent' } in this example i provide static values but how to provide dynamically like following ? <li><a [routerLink]="['/{{SettingStudent}}']">{{Settings}}</a></li> { path: '/{{settings}}', component:{{Settings}}, name:'{{SettingStudent}}' } is it possible in angular2 ? if yes then how ? 回答1: Try it like

问题 When subscribed to an event in Service, I can access the data it emits in another component, But when I am trying to route the page the data is being set in ngOnInIt() after the routing process starts it is being set to default. The service is registered in app.module.ts so it is same across the app. This component will emit an event with the index of the recipe user clicked. import { Component, OnInit, Input } from '@angular/core'; import { Recipe } from '../../files/recipe.model'; import {

问题 Angular 5 error. I am having trouble with getting user details on page refresh from browser. I am trying to load the data using APP_INITIALIZER but getting below error - compiler.js:19390 Uncaught Error: Provider parse errors: Cannot instantiate cyclic dependency! ApplicationRef ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1 Below is my configuration app.module.ts export function initUserFactory(userService: UserService) { return () => { userService.initUser()}; } let INITIAL

问题 I am trying to use angular cli and getting following error: ERROR in multi script-loader!./src/assets/vendors/by_bower/jquery/dist/jquery.js Actually what I did is : npm install -g @angular/cli; npm install ng serve In package.json I have "@angular/cli": "latest", on ng serve I am getting this error. After google I came to know that this can be issue of version of Angular cli. Please help how to get rid of this. Edit: On ng serve verbose I am getting: Child html-webpack-plugin for "index.html

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

问题 Im have 2 <router-outlet> and everything is ok,this my RouteConfig inside the profile component: @Component({ selector : "profile", templateUrl: '/client/tmpl/profile.html', directives: [ ROUTER_DIRECTIVES], }) @RouteConfig([ {name: 'Home', component: homeProfile ,path: '/' ,useAsDefault:true}, {name: 'Credit', component: credit ,path: '/credit' }, {name: 'BuyCredit', component: buyCredit ,path: '/buycredit' } ]) my problem is when I want use [routerLink] inside the credit component throw an

问题 I want to route to "config" router, which is nested 2 outlets deep but I'm unable to figure out the correct way to do so. <router> <router name="main"> <router name="config"> </router> </router> </router> In my routing.ts, I created 2 ways to reach the component: export const routes: Routes = [ { // Entrypoint. path: 'Foo', component: FooComponent, canActivate: [IsServerOnlineGuard], children: [ path: 'Bar', component: BarComponent, outlet: 'main', children: [ { path: 'Smtp', component:

问题 I have a routed Angular 4 application. It has a series of nested routes like this: const routes: Routes = [ { path: "genes/:id", component: GenePageComponent, children: [ { path: "mutations/:mutationType", component: MutationPageComponent }, ]}, This lets me visit /genes/123/mutations/non-coding , so that id is 123 and mutationType is 'non-coding'. If I inject ActivatedRoute , I can subscribe to the url or params , but only for the fragment . This means that I can only see mutationType in the

问题 How can I get the route which the user is trying to open within an canActivate guard in angular 2? How can I make the guard watch for every route parameter change eg. a change of the id within the route? import { Injectable } from '@angular/core'; import {Observable, Observer, Subject} from "rxjs/Rx"; @Injectable() export class RightsGuard implements CanActivate { constructor( private router: Router, private route: ActivatedRoute // private state: RouterStateSnapshot ) { } canActivate():

问题 I have set the base ref like this for an Angular 2 app <base href="MyApp"/> If I go to localhost/MyApp everything works correctly. However, if I go to localhost/myapp the route is not recognised. How can I tell Angular to treat the base route as case insensitive? 回答1: You will have to write code to override base href. Possible locations you can override is 1. Angular2: Make route paths case insensitive You write your own location strategy & Ignore case sensitivity there. And in your app