angular2-routing | 易学教程

Get a reference to a component of current route in Angular 2's router?

阅读更多关于 Get a reference to a component of current route in Angular 2's router?

Is there a clean way to get a reference to the component of current route? This seems to work, but seems very hacky: this.router.currentInstruction. component.componentType.prototype.somePropertyOrFunction(); In fact, you don't have access to the component instance associated to the current route with your expression. You only get the component type. That's why you need to use the prototype but you get a reference to function and don't reference to methods of the component instance. The main consequence will be that the this keyword (if used within the methods) will be undefined. To access the

How can I specify query parameters by routerLink directive

阅读更多关于 How can I specify query parameters by routerLink directive

I am experimenting the new router (version 3.0.0-alpha.7) and would like to know how to specify query parameters by routerLink directive? The Router.navigate() method below generates a URL like http://localhost:3000/component-a?x=1 this.router.navigate(['/component-a'], {queryParams: {x: 1}}); However, I can't figure out how to do the same thing with the routerLink directive. Template like below returns parser error... <a [routerLink]="['/component-a'], {queryParams: {x: 1}}">Component A</a> And the closest thing I can get is http://localhost:3000/component-a;x=1 , which uses the syntax for

Angular 2: Testing components with router

阅读更多关于 Angular 2: Testing components with router

I am writing the simplest component that is using a routeLink: @Component({ selector: 'memorySnippet', templateUrl: '<div class="memory-snippet-wrapper" *ngIf="memory" [routerLink]="['MainPanel', 'MemoryPanel', {'id' : this.memory.id}]">', directives: [CORE_DIRECTIVES, ROUTER_DIRECTIVES] }) export class MemorySnippetComponent { @Input() memory: Memory; } The problem occurs when I try testing this component. The moment I add the router link Karma is complaining about missing providers: After adding all the providers Karma is asking I get this: beforeEachProviders(() => [ MemorySnippetComponent,

Uncaught ReferenceError: require is not defined in angular2

阅读更多关于 Uncaught ReferenceError: require is not defined in angular2

<html> <head> <title>Angular 2 QuickStart</title>  <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> <script src="node_modules/rxjs/bundles/Rx.umd.js"></script> <script src="node_modules/angular2/bundles/angular2-all.umd.js"></script>  <script src='app/app.component.js'></script> <script src='app/boot.js'></script>  <script src="node_modules/angular2/upgrade.js"></script> </head>  <body> <my-app>Loading...</my-app> </body> </html> without <script src="node_modules

Angular 2 route with parameters re-initializing component onInit

阅读更多关于 Angular 2 route with parameters re-initializing component onInit

问题 I have an issue where my component is re-initializing when I route to it with new parameters. Here are my routes. const appRoutes: Routes = [ { path: '', component: MyNewComponentComponent }, { path: 'tiles', component: DisplayTileData }, { path: 'tiles/:master/:filters', component: DisplayTileData } ]; I route to "tiles" and do a service call to fetch some data. I then have a couple of buttons that route back to the same component with values for "master" and "filters". Routing back to the

Uncaught ReferenceError: require is not defined in angular2

阅读更多关于 Uncaught ReferenceError: require is not defined in angular2

问题 <html> <head> <title>Angular 2 QuickStart</title>  <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> <script src="node_modules/rxjs/bundles/Rx.umd.js"></script> <script src="node_modules/angular2/bundles/angular2-all.umd.js"></script>  <script src='app/app.component.js'></script> <script src='app/boot.js'></script>  <script src="node_modules/angular2/upgrade.js"></script> </head> <!-- 3. Display

Angular 2 Router, href links and unwanted page refresh

阅读更多关于 Angular 2 Router, href links and unwanted page refresh

i am currently experimenting with angular2 (beta1) and i'm a bit puzzled about the new router. Navigating via router.navigate works like a charm, while trying to do that via a normal link to a registered route refreshes the page. This happens with PathLocationStrategy of course, as HashLocationStrategy works as expected. Is this a bug or the normal behaviour? TIA Günter Zöchbauer You should use a routerLink instead. For example <a [routerLink]="[ '/MyCmp', {myParam: 'value' } ]"> See also https://angular.io/guide/ajs-quick-reference#ng-href You could add event listeners to the <a href=...

Why do my angular2 components get re-instantiated each time I change the route?

阅读更多关于 Why do my angular2 components get re-instantiated each time I change the route?

I am trying to put together a demo app of Angular 2 + Rx.JS 5/Next. I noticed that my components are re-instantiated each time I switch the route. Here is the code for the root app: import {bootstrap} from 'angular2/platform/browser'; import {HTTP_PROVIDERS} from 'angular2/http'; import {ROUTER_PROVIDERS} from 'angular2/router'; import {AppComponent} from './app.component.ts'; bootstrap(AppComponent, [HTTP_PROVIDERS, ROUTER_PROVIDERS]); Here is the code for the root component: import {Component} from 'angular2/core'; import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router'; import

Clear all queryParams with new Router v3 Angular2

阅读更多关于 Clear all queryParams with new Router v3 Angular2

I'm trying to figure out how to use the Angular2 router navigation (router 3.0.0-alpha.7) with query parameters. I can easily navigate to a route with a queryParam with this line: this._router.navigate(['/login'], {queryParams: {redirect: 'route1'}}); In the '/login' component, I do some login which will redirect to the redirect route, namely route1 here. However, after the redirection, the redirect query parameters stays in the URL, i.e. I'm now at page /route1?redirect=route1 . I want to remove the redirect parameter here. Moreover, if I then navigate to another page with the same redirect

Sending whole object from one component to another in angular 2

阅读更多关于 Sending whole object from one component to another in angular 2

I have a problem. I don't know how to send object from one component to another. In first component cinema.component.html I have following function call: <a title="Reserve" (click)="openReservationPage(repertoire)">Reserve</a> In cinema.component.ts file, for that .html I have something like: openReservationPage(repertoire: UpcomingRepertoire) { this.router.navigate(['/reserve', {repertoire: JSON.stringify(repertoire)}]); } My app.routes.ts file contains appropriate routing: { path: 'reserve', component: ReserveFormComponent } How can I use this repertoire object in another page reserve-form