angular2-routing | 易学教程

Passing value between two components (pages) in Angular 2

阅读更多关于 Passing value between two components (pages) in Angular 2

问题 I am using Angular 2 (TypeScript) I have two components (actually they are two pages too). They are NOT parent and child relationship. I want to pass a value to second component(page) when I click the link in the first component(page). I know "URL parameters" way through router. But I don't want to show this parameter in the link. Is there any other way? Thank you! 回答1: The canonical way is to establish an injectable service and inject the service into any components that need the data. Since

how to change page title in angular2 router

阅读更多关于 how to change page title in angular2 router

I am trying to change the page title from the router, can this be done? import {RouteConfig} from 'angular2/router'; @RouteConfig([ {path: '/home', component: HomeCmp, name: 'HomeCmp' } ]) class MyApp {} awqueous The Title service @EricMartinez points out has a setTitle() method - that's all you need to set the title. In terms of doing it automatically on route changes, as of now there's no built-in way of doing this other than subscribing to Router and calling setTitle() in your callback: import {RouteConfig} from 'angular2/router'; import {Title} from 'angular2/platform/browser';

How to route to a Module as a child of a Module - Angular 2 RC 5

阅读更多关于 How to route to a Module as a child of a Module - Angular 2 RC 5

I am in the process upgrading an application I'm working on to the latest Angular 2 release candidate. As part of this work I am attempting to use the NgModule spec and migrating all of the parts of my application to modules. For the most part, this has gone very well with the exception of an issue with routing. "@angular/common": "2.0.0-rc.5", "@angular/compiler": "2.0.0-rc.5", "@angular/core": "2.0.0-rc.5", "@angular/forms": "0.3.0", "@angular/http": "2.0.0-rc.5", "@angular/platform-browser": "2.0.0-rc.5", "@angular/platform-browser-dynamic": "2.0.0-rc.5", "@angular/router": "3.0.0-rc.1", My

Angular 2 - Routing - CanActivate work with Observable

阅读更多关于 Angular 2 - Routing - CanActivate work with Observable

I have an AuthGuard (used for routing) that implements CanActivate . canActivate() { return this.loginService.isLoggedIn(); } My problem is, that the CanActivate-result depends on a http-get-result - the LoginService returns an Observable . isLoggedIn():Observable<boolean> { return this.http.get(ApiResources.LOGON).map(response => response.ok); } How can i bring those together - make CanActivate depend on a backend state? Kery Hu You should upgrade "@angular/router" to the latest . e.g."3.0.0-alpha.8" modify AuthGuard.ts @Injectable() export class AuthGuard implements CanActivate { constructor

How can I improve load performance of Angular2 apps?

阅读更多关于 How can I improve load performance of Angular2 apps?

Angular2 app is loading slow, how can I improve the performance on load? I use Angular2, typescript with html5. currently my app takes 4 seconds to load. I host with Firebase and use cloudflare. Things I'm doing / info: I've compressed images. I minify css I minify js. I use async on my scripts. My scripts are in my . The scripts are around 700kb I used google speed test and get 65% I used minified version of the libs I use e.g. bootstrap etc. Using systemjs. This is the seed app im using: https://github.com/mgechev/angular-seed Flow: When the app loads it shows a blue screen (this is the

provideRouter and RouterConfig not found in new @angular/router 3.0.0-alpha.3^

阅读更多关于 provideRouter and RouterConfig not found in new @angular/router 3.0.0-alpha.3^

问题 I am migrating an angular2 app to RC2 and trying to use the router's version 3 alpha. I have followed the set up of the plunker given by the angular docs for routing But i keep getting the following errors: /@angular/router/index"' has no exported member 'provideRouter' /@angular/router/index"' has no exported member 'RouterConfig' when trying to use the following imports in my app.router.ts file: import { provideRouter, RouterConfig } from '@angular/router'; I am using typescript in visual

How can I programmatically pass parameters to an auxiliary route in angular2+?

阅读更多关于 How can I programmatically pass parameters to an auxiliary route in angular2+?

问题 Using angular2, I want to open an auxiliary route programmatically in my component. This code opens the route with the 'list' path and it opens the route in the correct named router outlet, but I am not sure how to pass parameters to the route: this.router.navigate(['./', { outlets: { 'list-outlet': 'list' } }]); 回答1: The route for the component that displays the details for a specific product would need a route parameter for the ID of that product. We could implement this using the following

Redirect to a different component inside @CanActivate in Angular2

阅读更多关于 Redirect to a different component inside @CanActivate in Angular2

Is there any way we can redirect to a different component from @CanActivate in Angular2 ? Druxtan Yes, you can! Doing this will prevent your component from instantiating for nothing. First, make a new file src/app-injector.ts let appInjectorRef; export const appInjector:any = (injector = false) => { if (!injector) { return appInjectorRef; } appInjectorRef = injector; return appInjectorRef; }; Then, get the reference from bootstrap // ... import {appInjector} from './app-injector'; // ... bootstrap(App, [ ROUTER_PROVIDERS ]).then((appRef) => appInjector(appRef.injector)); Finally in your

How do I re-render a component manually?

阅读更多关于 How do I re-render a component manually?

问题 I'm a newcomer to Angular2, I'm used to the Angular 1 digest cycle, meaning if I update the scope of a view I can manually trigger a digest by calling $scope.$digest() . However, I'm not sure how to do this in Angular2, esp given that the new framework doesn't have the implicit data binding that the old version had. Here's my problem. I have a route that loads a component when a url with a parameter is hit: // Router export const AppRoutes : RouterConfig = [ { path: 'my/:arg/view', component:

Angular2 without hash in the url

阅读更多关于 Angular2 without hash in the url

Now, my website's url looks like this because I'm using the approach described here http://localhost:4200/#/cadastro Is it possible to remove the hash in the url and not get the 404 error? EDIT: Router Module added const appRoutes: Routes = [ { path: '', component: HomeComponent }, { path: 'cadastro', component: CadastroNoivosComponent }, { path: '**', component: HomeComponent } ]; export const routing = RouterModule.forRoot(appRoutes); duke636 If you use PathLocationStrategy as describe here you can remove the hash in the URL. But getting rid of 404 error needs some server side tweak. A quick