angular-routing | 易学教程

Angular Router Events: NavigationEnd — How to filter only the last event

阅读更多关于 Angular Router Events: NavigationEnd — How to filter only the last event

问题 I want to extract only the last event entry of type NavigationEnd from router.events. But somehow I can't find a proper way to do this. Whatever I try the following code snipped is the only way to get access to these objects of interest. let ne: any; router.events.filter(e => e instanceof NavigationEnd) .forEach(e => { ne = e as NavigationEnd; }); console.log('target page: ', ne.urlAfterRedirects); But do I really have to use .forEach() letting it run though all entries and using then the

Angular2 navigate from a component to a sibling component without tearing down the first

阅读更多关于 Angular2 navigate from a component to a sibling component without tearing down the first

问题 I've just started learning Angular2 and I want to build a very common "list-detail" style page similar to this: http://xgrommx.github.io/rx-book/index.html . When you click an item in left-bar it initiates a navigation to the center detail view without tearing down the left-bar. What's the best way to achieve this effect? My current design is like the following: When I start the home component, the list component(child1) will load immediately and it will call an external API to fetch the

angular2 router navigation does not load component properly

阅读更多关于 angular2 router navigation does not load component properly

问题 My code for that is as shown below: googleClick(): void { this._auth.login('google').subscribe( (data: any) => { console.log('google server data ' + JSON.stringify(data)); this.loginService.registerUser(data.email, data.name, '0').subscribe(res => { if (res.status === '200') { this.storage.store('user_token', res.data.user_token); this.storage.store('user_email', data.email); this.storage.store('user_img', data.image); this.storage.store('user_first_name', res.data.user_name); this.storage

Route without parameter value; Angular route redirect - Can I use redirectTo to parameter path?

阅读更多关于 Route without parameter value; Angular route redirect - Can I use redirectTo to parameter path?

I'm wandering if it is possible to redirect path: ' ' to path: ':id' ? Is there a way I can achieve this? Thank you. { path: 'folder', children: [ { path: '', redirectTo: ':id', pathMatch: 'full', }, { path: ':id', canActivate: [AuthGuard], component: DocumentsComponent, }, ] } I found a way to redirect 'folder' route to 'folder/:id' with empty 'id' parameter: { path: 'folder', redirectTo: 'folder/', pathMatch: 'full', }, { path: 'folder', children: [ { path: ':id', canActivate: [AuthGuard], component: DocumentsComponent, }, ] } *Note that the redirect must be first. if you give a default id

External Links in Angular App

阅读更多关于 External Links in Angular App

问题 I'm in the process of incorporating Angular into a single page of an existing rails app. Everything is working perfectly with the routing within the page using the following app.config(function($routeProvider, $locationProvider) { $routeProvider .when('/services/:id', { templateUrl: "/javascripts/angular/templates/service_ui/service.html", controller: "ServiceCtrl" }) $locationProvider.html5Mode(true); }); However, I'd like to maintain normal functionality for links that are not related to

import html template in typescript

阅读更多关于 import html template in typescript

问题 I'm trying to import my html template so that webpack will recognize them and include them when I build. ( webpack -d ) According to this GitHub issue I should do this declare module '*.html' { const _: string; export default _; } Then import template from './myTemplate.html'; should work. But it doesn't quite do the trick. import template from './myTemplate.html'; console.log(template); // undefined However this "works" import * as template from './myTemplate.html'; console.log(template); //

AngularJS, How about multiple routes with different templates but the same controller?

阅读更多关于 AngularJS, How about multiple routes with different templates but the same controller?

问题 i'm investigating if i can have what the title says. Here's my thought. Let's assume that i've got this routes: .when('/', { templateUrl : 'partials/homepage.html', }) .when('/test', { templateUrl : 'partials/test.html', }) .when('/page/:pageID', { templateUrl : 'partials/page.html', }) .when('/page/single/:pageID', { templateUrl : 'partials/page-single.html', }) Until now i had the opportunity to add the templateUrl as also the controller details in the route and everything was working just

Angular - Lazy loading a module inside module with a child route

阅读更多关于 Angular - Lazy loading a module inside module with a child route

问题 I have an angular application where my main routing module lazy loads modules correctly. I do however now have an additional requirement of displaying another component / module inside one of the lazy loaded modules. When I now navigate to users/id (this part works correctly) I want a tab view in the HTML where I can load additional modules based on what tab is clicked on. For example, I might have 3 buttons: User Albums , User Favourites and User Stats . When I click on one of those, I want

Angular lazyload child routes with outlet

阅读更多关于 Angular lazyload child routes with outlet

I have tried to reproduce my error in a stackblitz What I try to accomplish I am trying to have a route with a dynamic parameter, and have sub routes of that parameter. I want this module to be lazyloaded. I have made a working solution for the dynamic parameter using the :id definition in the route definition. I want the child routes to output in a different router-outlet. Specifically I want a component ( UserComponent ) loaded on the route user/:username - if the path is empty after the :username I want to load UserDefaultContentComponent in the router defined inside the UserComponent - If

Angular - Apply style to element depending on sibling RouterLinkActive?

阅读更多关于 Angular - Apply style to element depending on sibling RouterLinkActive?

问题 I do not have only one menu bar on my app that I need to be painted when the user navigates, I have another components too that needs to be painted as well. Can I achieve this just using routerLinkActive ? menu.html <menu> <a routerLink="page1" routerLinkActive="active"> option1 </a> <a routerLink="page2" routerLinkActive="active"> option2 </a> </menu> This menu works great. But what I'm asking is how can I take advantage of routerLinkActive property placed in other HTML Tag. like: main.html