angular2-routing | 易学教程

How to specify auxiliary component for child route in angular2 router3

阅读更多关于 How to specify auxiliary component for child route in angular2 router3

I am using the new route3 and would like to know what is the URL syntax to specify a auxiliary component for a child route. I have following child route definition: const router: RouterConfig = [ { path: 'component-c', component: ComponentC, children: [ { path: 'auxPath', component: ComponentAux, outlet: 'aux'}, { path: 'c1', component: ComponentC1 } ] } ]; And the template for ComponentC is like @Component({ selector: 'component-c', template: ` <div>Child Route Component</div> <router-outlet></router-outlet> <router-outlet name="aux"></router-outlet> `, directives: [ROUTER_DIRECTIVES] }) URL

How to broadcast events from app.component to router-outlet in angular2

阅读更多关于 How to broadcast events from app.component to router-outlet in angular2

问题 I have created a service that has a stream$ that will emit an event, I hope after the app.component fires the stream$ emit, the child component in the <router-outlet></router-outlet> will be able to subscribe it, but now the problem I have is even if it subscribes it in the constructor, the subscription call back never gets fired. I wonder if this is different from when emitting events through a stream service? What is the best practice? 回答1: The most simple way is to create event bus service

Versioning an Angular 2 App

阅读更多关于 Versioning an Angular 2 App

How can one mark versions of an Angular 2 app? There are some problems like views (via templateUrl ) are not getting updated in route views (child components). I've tried things like <script> System.config({ // baseURL: '/', packages: { app: { format: 'register', defaultExtension: 'js' } } }); System.import('v1/app/boot') .then(null, console.error.bind(console)); </script> Or app/v1/boot and playing with base but it's not working. Note: Just for the record, at development time, cached templates (introduces via templateUrl ) do annoyingly slow things. One should use incognito sessions or clear

Angular2 RC6 - Nested modules with routing

阅读更多关于 Angular2 RC6 - Nested modules with routing

问题 In my application I have a SupportModule which has 3 sub-Modules ( AdminModule , ChatModule , ContactModule ). SupportModule and its 3 sub-Modules have their own routings define. Structure looks something like The routing for the `AdminModule' is given below: import { AdminComponent } from './admin.component'; import { RssFeedsComponent } from './rssFeeds.component'; import { RssFeedDetailComponent } from './rssFeedDetail.component'; export const adminRoutes: Route = { path: 'admin',

Angular2: Using routes, how to display the navigation bar after successfully logged in?

阅读更多关于 Angular2: Using routes, how to display the navigation bar after successfully logged in?

问题 I'm trying to show the navigation bar, once the user successfully do. For example: How To Change "showMenu" property in "AppComponent" inside the "LoginComponent"? Important: I am using routes. app.ts: @Component({ selector: 'app', template: `<div *ngIf="showMenu"> <fnd-menu-nav></fnd-menu-nav> </div> <router-outlet></router-outlet> `, directives: [ROUTER_DIRECTIVES, MenuNavComponent] }) @RouteConfig([ { path: '/login', name: 'Login', component: LoginComponent, useAsDefault: true }, { path: '

angular2 guard not working on page refresh

阅读更多关于 angular2 guard not working on page refresh

Before every request I want to be sure that there is a user profile available. I use a canActivateChild guard to do this. According to the documentation of angular2 it is possible to return an observable: https://angular.io/api/router/CanActivateChild app.routes.ts export const routes: Routes = [ { path: '', canActivateChild: [ProfileGuard], children: [ { path: 'home', component: HomeComponent, canActivate: [AuthGuard] }, { path: 'login', component: LoginComponent, canActivate: [GuestGuard] }, } ]; The canActivatedChild is executed before the child route canActivate profile.guard.ts: export

Angular2 router - Navigate to the current page with different parameters

阅读更多关于 Angular2 router - Navigate to the current page with different parameters

问题 I am trying to route to the current page with different param with no avail. I have a combo box that triggers: this.router.navigate(['page', selectedId]); the Url is changing but that's about it. How do I route to the same page with different param? 回答1: The page will not refresh, cause that's how the Router works.. without refreshing the page! You have to subscribe to the route parameters to detect changes in them and then do whatever you want to with that information.. So inject

Auto redirecting after n seconds using Angular 2

阅读更多关于 Auto redirecting after n seconds using Angular 2

I wanted to display a page for 'n' seconds and then redirect to another route. Came across a couple of stackoverflow posts ( url1 and url2 ) about auto redirecting after 'n' seconds in Angular 1.x. But I m confused how to implement the same in Angular2? You can inject and use Router from @angular/router and navigate in setTimeout . import { Router } from '@angular/router'; constructor(private router: Router) {} ngOnInit() { // do init at here for current route. setTimeout(() => { this.router.navigate(['nextRoute']); }, 5000); //5s } 来源： https://stackoverflow.com/questions/42488068/auto

Targeting named outlet via routerLink adds extraneous “/”

阅读更多关于 Targeting named outlet via routerLink adds extraneous “/”

问题 I'm trying to launch a modal in my app via routing. Everything seems to work except that an extra slash is added to the URL that prevents it from resolving. The Url should look like this (and it works if I enter it manually)... /accounts(modal:accounts/1/edit) but i'm getting this instead (notice the slash between the base url and outlet target)... /accounts/(modal:accounts/1/edit) The base tag is set... <head> <meta charset="utf-8"> <title>myApp</title> <base href="/"> ... </head> Here's my

Angular 2 Get current route

阅读更多关于 Angular 2 Get current route

问题 So I need somehow check if I am on home page and do something and in other pages don't do that. Also that component imported on all of pages. How can I detect on that component if I'm on home page??? Thanks 回答1: Try this, import { Router } from '@angular/router'; export class MyComponent implements OnInit { constructor(private router:Router) { ... } ngOnInit() { let currentUrl = this.router.url; /// this will give you current url // your logic to know if its my home page. } } 回答2: Try it