angular2-routing | 易学教程

Angular2 RC5 Mock Activated Route Params

阅读更多关于 Angular2 RC5 Mock Activated Route Params

问题 I need to be able to mock the activated route parameters to be able to test my component. Here's my best attempt so far, but it doesn't work. { provide: ActivatedRoute, useValue: { params: [ { 'id': 1 } ] } }, The ActivatedRoute is used in the actual component like this: this.route.params.subscribe(params => { this.stateId = +params['id']; this.stateService.getState(this.stateId).then(state => { this.state = state; }); }); The error I get with my current attempt is simply: TypeError:

Scroll Top in angular2

阅读更多关于 Scroll Top in angular2

问题 I am working on angular2 web application where I need help on the following. My page consists of multiple components. I want to scroll top of the page when user clicks a button. I tried document.body.scrollTop = 0; but this is not working in Chrome. I Tried document.documentElement.scrollTop=0;window.scrollTo(0, 0); but not working 回答1: import like this, import { Inject} from "@angular/core"; import { DOCUMENT } from '@angular/platform-browser'; In your constructor add this, constructor(

Using Angular2, how to redirect to previous url before login redirect

阅读更多关于 Using Angular2, how to redirect to previous url before login redirect

问题 Using Angular2 to create a single page app, I'm intercepting unauthenticated user access to non-public routes in a custom RouterOutlet and redirecting them to a login view. After a successful login, I want to redirect the user to their originally requested view, rather than the default view. I've noticed that Router has a renavigate() function that navigates to the last successful route BUT the last successful route was /auth/login and not the originally requested url. Basically : How can I

Error: Cannot reattach ActivatedRouteSnapshot created from a different route

阅读更多关于 Error: Cannot reattach ActivatedRouteSnapshot created from a different route

问题 I am trying to implement the RouteReuseStrategy class. It works fine when I navigate to top level paths. As soon as a path has child paths and I navigate to the child path, then navigate back to a top level path I receive the following error: Error: Uncaught (in promise): Error: Cannot reattach ActivatedRouteSnapshot created from a different route I have created a plunker to demonstrate the error. I see the plunker does not work in IE 11, please view it in the latest version of Chrome Steps

ng2-translate not working in lazy-loaded module

阅读更多关于 ng2-translate not working in lazy-loaded module

I'm using ng2-translate for language handling in an Angular 2 RC5 app I'm creating. The app has two feature modules, one lazy loaded and one eager loaded. TranslateModule is made available through a shared module. The problem is that the translate pipe works fine in the eager-loaded module but not the lazy-loaded one. To verify it has to do with the loading method I converted both to eager-loading and everything worked fine. A plunk that demonstrates the issue can be found here: Plunker The significant code is below as well. The initial page is the eager-loaded one, hence why the strings look

Angular 2 : multiple HTML pages within same component

阅读更多关于 Angular 2 : multiple HTML pages within same component

I am new to angular 2, I have a component named Register, in this 1 component I have 5 HTML pages where one click of 1st register page I will go to the 2nd register page and on click of 2nd register page I will go to the 3rd register page. How can I make 5 HTML pages in 1 component I means is there a way to achieve multiple templates per component? How to do routing? The main intent is to have separate HTML & SCSS files and routing logic. As of now I am rendering pages using ngIf which has made my page very lengthy. Is there a way around to achieve this?  <div class="open-card-BG"

RC5 : Lazy loading of NgModule in different router-outlet

阅读更多关于 RC5 : Lazy loading of NgModule in different router-outlet

I'm using RC5's NgModule to do dynamic route loading. My app has two depth level. I have routes like : app/login app/dashboard/module1 app/dashboard/module2 etc... Each deph level has it's own router-outlet so I can define custom layout at each level. i.e. login and dashboard are displayed in app router-outlet while module1 and module2 are displayed in dashboard router-outlet. What is the configuration to load dynamically each route on demand ? Here is a minimal working example of dynamic loading accoss NgModules and router-outlet. app.module.ts @NgModule({ declarations: [AppComponent],

Angular2 Dynamic HTML with functional RouterLink

阅读更多关于 Angular2 Dynamic HTML with functional RouterLink

Long time user, first time question asker! I've been trying to figure this out for the better part of two days to no avail, so here we go. Dynamic compiled templates from external sources in Angular2? I am using http to get page content in the form of HTML from the WordPress API. So I have a template like this: <div [innerHTML]="contentHTML"> </div> and "contentHTML" is a string variable in the component and assigned a value asynchronously via the API call to something like this: <a routerLink="/help/faq.html"> </a> and I want that routerLink to work. Of course routerLink could be anything

Angular2 Routing: import submodule with routing + making it prefixed

阅读更多关于 Angular2 Routing: import submodule with routing + making it prefixed

I have a main module and some submodules. And I want to specify some not trivial routing between them. I'd prefer defining the routes of a submodule within the submodule. E.g.: @NgModule({ imports: [ /*...*/ RouterModule.forChild([ { path: 'country', redirectTo: 'country/list' }, { path: 'country/list', component: CountryListComponent }, { path: 'country/create', component: CountryCreateComponent }, /*...*/ ]) ], declarations: [/*...*/], exports: [ RouterModule, ], }) export class CountryModule {} I want to import this module with its own internal routing, but I want to make its whole routing

Passing objects in routing [duplicate]

阅读更多关于 Passing objects in routing [duplicate]

This question already has an answer here: How do I pass data to Angular routed components? 11 answers I have a component in Angular2 hosting the table of users (userTableComponnent) and another component of userDetails. Upon clicking on a row in users table, I want to route to the userDetails. One implementation is to pass the userId only, so in userDetails, I fetch the details of the user with another http get. However, this is redundant, as I grab all the user info in userTableComponent. So what I really need is to pass the User object from userTableComponent to userDetails. Any idea how to