angular2-routing | 易学教程

Angular 2 - moving modules to their own project

阅读更多关于 Angular 2 - moving modules to their own project

问题 I am attempting to create portal like functionality with angular 2 which will provide base navigation and global services such as authentication, but allow other developers to create their own modules which fundamentally plug into the portal. I am using angular-cli and have made a quick proof of concept with the modules being created inside the project (see tree below) which are lazy loaded in app.module via the router (with loadChildren). Each child module has its own router and is

Angular2 router-deprecated dependencies not being loaded

阅读更多关于 Angular2 router-deprecated dependencies not being loaded

I have recently updated my angular2 version and have had the following issue: The router lib no longer exists, it has been replaced by router-deprecated. I have this menu component: import { Component } from '@angular/core'; import { DashboardComponent } from './dashboard.component' import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated'; @Component({ selector: 'main-menu', templateUrl: 'app/views/menu.html', directives: [ROUTER_DIRECTIVES], providers: [ ROUTER_PROVIDERS ] }) @RouteConfig([ { path: '/dashboard', name: 'Dashboard', component:

How to unit test a component that depends on parameters from ActivatedRoute?

阅读更多关于 How to unit test a component that depends on parameters from ActivatedRoute?

问题 I am unit testing a component that is used to edit an object. The object has an unique id that is used in order to grab the specific object from an array of objects that are hosted in a service. The specific id is procured through a parameter that is passed via routing, specifically through the ActivatedRoute class. The constructor is as follows: constructor(private _router:Router, private _curRoute:ActivatedRoute, private _session:Session) { } ngOnInit() { this._curRoute.params.subscribe

How do I provide a service in a lazy-loaded module and have that service scoped to just the lazy-loaded module and its components?

阅读更多关于 How do I provide a service in a lazy-loaded module and have that service scoped to just the lazy-loaded module and its components?

问题 In the angular docs FAQ section it states, "Unlike providers of the modules loaded at launch, providers of lazy-loaded modules are module-scoped." link Does 'module-scoped' here mean just the module or does it extend to include all components belonging to that module? The reason I ask is because I have a lazy-loaded module with 2 components that belong to it. I register a service in the module but for some reason each component is getting a different instance of that service. What do I need

Angular2 - Interaction between components using a service

阅读更多关于 Angular2 - Interaction between components using a service

I have two component A and B, where component A contains a button. I wish when user click on this button, fire a function on component B <A></A> <router-outlet></router-outlet> And the component B is rendered using routing.I am considering using a service with an observable boolean that indicate if the button in A is clicked. Is this the right way to achieve it ? Seid Mehmedovic Shared service is a common way of communication between non-related components. Your components need to use a single instance of the service , so make sure it's provided at the root level. An example using the

Can't reload/refresh active route

阅读更多关于 Can't reload/refresh active route

I have recently updated to the new RC3 and Router3alpha and it seems some things have changed. I noticed that a click on the link of an active route does no longer result in the component to be reloaded. How do I achieve this behaviour with the new router3? My link looks like <a [routerLink]="['/link1']">Link1</a> And to test I simply used a random number in ngOnInit: export class LinkoneComponent implements OnInit { public foo: number; constructor() {} ngOnInit() { this.foo = Math.floor(Math.random() * 100) + 1; } } It works just fine when switiching between routes, but a click on the

Angular 2 router resolve with Observable

阅读更多关于 Angular 2 router resolve with Observable

问题 After release of Angular 2 RC.5 there was introduced router resolve. Here demonstrated example with Promise, how to do the same if I make request to server with Observable? search.service.ts ... searchFields(id: number) { return this.http.get(`http://url.to.api/${id}`).map(res => res.json()); } ... search-resolve.service.ts import { Injectable } from '@angular/core'; import { Router, Resolve, ActivatedRouteSnapshot } from '@angular/router'; import { Observable } from 'rxjs/Observable'; import

How to determine previous page URL in Angular?

阅读更多关于 How to determine previous page URL in Angular?

问题 Suppose I am currently on the page which has the URL /user/:id . Now from this page I navigate to next page :id/posts . Now Is there a way, so that i can check what is the previous URL, i.e. /user/:id . Below are my routes export const routes: Routes = [ { path: 'user/:id', component: UserProfileComponent }, { path: ':id/posts', component: UserPostsComponet } ]; 回答1: You can subscribe to route changes and store the current event so you can use it when the next happens previousUrl: string;

Angular2: Configuration 'name' conflicts with existing route 'name'

阅读更多关于 Angular2: Configuration 'name' conflicts with existing route 'name'

问题 I have some components of which one with dynamic routes. the dynamic routes are added as, let config = []; for(let i = 0; i < this.pages.length; i++) { config.push({ path: this.pages[i].slug, name : this.pages[i].name, component: AnotherComponent, }); } router.config(config); whenever the component with dynamic route is loaded more than once, the routes are configured again and that results in configuration conflict. Here's the plunk, The dynamic routes are loaded with the link users ,

routerLink syntax when targeting multiple router-outlets (primary + aux)

阅读更多关于 routerLink syntax when targeting multiple router-outlets (primary + aux)

问题 Does anyone know why link #1 and #2 work but link #3 doesn't? <a [routerLink]="['/contact']">Contact Solo</a> | <a [routerLink]="[{ outlets: { aux: 'aside' }}]">Aux Solo</a> | <a [routerLink]="['/contact', { outlets: { aux: 'aside' }}]">Contact + Aux</a> <router-outlet></router-outlet> <router-outlet name="aux"></router-outlet> In other words: I can activate the primary route individually (link #1), I can activate the auxiliary route individually (link #2), but I can't activate the primary