angular2-routing | 易学教程

Angular 2 how does auxiliary routes work in 2.1.0?

阅读更多关于 Angular 2 how does auxiliary routes work in 2.1.0?

问题 I have this route: { path: 'dashboard', loadChildren: '../pages/dashboard/dashboard.module#DashboardModule' } With the dashboard 's router looking like this: @NgModule({ imports: [ ComponentsModule, SharedModule, RouterModule.forChild([ { path: '', component: DashboardComponent } ]) ], declarations: [ DashboardComponent ] }) export class DashboardRouterModule {} And in my parent view (which is /admin , dashboard route is /admin/dashboard ), I have a <router-outlet name="admin"></router-outlet

Image sometimes does not show in Angular2

阅读更多关于 Image sometimes does not show in Angular2

问题 I have an image <img src="image.png"> . When I use this._router.navigate(['/Home']); , sometimes, the image in the page won't show. Instead it shows like this: I tried to change to this: this._ngZone.run(() => { this._router.navigate(['/Home']); }); But it does not work. What can potentially cause this? Thanks 回答1: <head> <base href="/"> ... </head> Use that as the first line after head. After that use the paths of image as per the server path of the / path(html file). Dont use HashStrategy!

How to catch routes in *ngIf

阅读更多关于 How to catch routes in *ngIf

问题 So I want to make an anchor element on my Header disappear when a specific page is hit. How can I catch the url in the *ngIf when that page is hit. I have a header which will remain same for all pages. Just need to hide an anchor element when I am routed at /home. How to catch this "/home" in *ngIf? *ngIf = "href='/home'" is not working. Any alternatives? 回答1: //mycomponent.component.ts class MyComponent { constructor(private router: Router){ } } //mycomponent.component.html <div *ngIf=

Angular: How to get component instance of router-outlet

阅读更多关于 Angular: How to get component instance of router-outlet

问题 html: <router-outlet></router-outlet> component: @Component({ selector: 'xx', templateUrl: './xx.html', styleUrls: ['./xx.css'], providers: [ RouterOutlet] }) export class AppComponent { constructor(private routeroutlet: RouterOutlet){ } getref() { console.log(this.routeroutlet); console.log('refresh', this.routeroutlet.component); } } i'm getting this error core.es5.js:1224 ERROR Error: Outlet is not activated at RouterOutlet.get [as component] (router.es5.js:5449) at AppComponent

Scroll to a certain element of the current page in Angular 4

阅读更多关于 Scroll to a certain element of the current page in Angular 4

问题 Upon clicking a button (which is bottom of the page), I want to go to a certain element (in my case, #navbar) which is in the top of the current page, but I don't know how to do it. I've tried the following code with no avail. <nav class="navbar navbar-light bg-faded" id="navbar"> <a class="navbar-brand" href="#"> {{appTitle}} </a>  </nav>   <button class="btn btn-outline-secondary" (click)="gotoTop()"

angular2 Routing issue with pathmatch

阅读更多关于 angular2 Routing issue with pathmatch

问题 So I decided to retry the angular2 tutorial, since last time I had some issues with the router (sound familiar?). See link: Angular 2 tutorial Where I followed every step, got everything to work, until I got to the redirect section. { path: '', redirectTo: '/dashboard', pathMatch: 'full' }, Where it hangs on the "pathMatch". Even when I try to restart with "npm start" in the command window, I get this error: app/app.routes.ts(11,5): error TS2322: Type '({ path: string; redirectTo: string;

Angular2 Service variables being reset on route change

阅读更多关于 Angular2 Service variables being reset on route change

问题 I have a service that i am using to keep track of the state of my model. I have multiple components that i would like to have access this service variables properties. When the first component loads on init, i set the model, yet when i try to access this model from my second component after route change, the variable is now undefined. Below is an example of what im talking about. Component 1 constructor(private service: Service, private route) ngOninit(){ this.service.setModel(); console.log

Angular 2 dynamically set routerLink using a component property

阅读更多关于 Angular 2 dynamically set routerLink using a component property

问题 I have created an component that contains a element with a routerLink property which I want to set from a template that uses the component. When I try to do this I get the error message 'Cannot read property 'path' of undefined'. My component looks link this: info-box.component.ts import { Input, Component } from "@angular/core"; import { ROUTER_DIRECTIVES } from "@angular/router"; @Component({ selector: "info-box", template: require("./info-box.component.html"), directives: [ ROUTER

Angular2 Router and Multiple Resolves in one route

阅读更多关于 Angular2 Router and Multiple Resolves in one route

问题 In ui-router its easy to make multiple resolves defined in the route configuration, so lets say something like: export const APP_STATES: Ng2StateDeclaration[] = [ { name: 'dashboard', url: '/dashboard', component: DashboardComponent, resolve: [ { token: 'playbookDurations', deps: [DashboardService], resolveFn: (svc: DashboardService) => svc.getPlaybookDurations() }, { token: 'playbookSuccesses', deps: [DashboardService], resolveFn: (svc: DashboardService) => svc.getPlaybookSuccesses() }, {

Passing params angular 2 traditional way

阅读更多关于 Passing params angular 2 traditional way

问题 I am trying to pass parameters to one component in this format www.domain.com?param=value , but Angular keep sending parameters like this www.domain.com;param=value . Why replace ? for ; ? This is my route conf: const router: Routes = [ {path: '', redirectTo: '/shops', pathMatch: 'full'}, {path: 'shops', component: ShopComponent, canActivate: [AuthManager]}, {path: 'shop/new', component: NewShopComponent, canActivate: [AuthManager]}, {path: 'shop/new/:id', component: NewShopComponent,