angular2-routing | 易学教程

Why does my angular2 app initialize twice?

阅读更多关于 Why does my angular2 app initialize twice?

问题 Please tell me where my mistake is, my app is running the AppComponent code twice. I have 5 files: main.ts: import { bootstrap } from '@angular/platform-browser-dynamic'; import { enableProdMode } from '@angular/core'; import { AppComponent, environment } from './app/'; import { APP_ROUTER_PROVIDERS } from './app/routes'; import {HTTP_PROVIDERS} from '@angular/http'; import {ServiceProvider} from "./app/providers/app.service.provider" if (environment.production) { enableProdMode(); }

HashLocationStrategy does not produce # locations when routing?

阅读更多关于 HashLocationStrategy does not produce # locations when routing?

问题 I'm running the Angular 2 beta.0 and I'm messing around with routing. Here's what I have AppComponent: import {Component, provide} from 'angular2/core'; import {bootstrap} from 'angular2/platform/browser'; import {FORM_DIRECTIVES, CORE_DIRECTIVES} from 'angular2/common'; import {Http, Response, HTTP_PROVIDERS} from 'angular2/http'; import {RouteConfig, Location, LocationStrategy, HashLocationStrategy, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router'; import {HomeComponent} from '.

Pass NavigationExtras to routerLink in template

阅读更多关于 Pass NavigationExtras to routerLink in template

问题 I want to disable changing the URL when routing in my Angular 2 app. I know that skipLocationChange: true has to be passed as a NavigationExtras parameter to the router. My question is: Is it possible to pass NavigationExtras to a routerLink from inside the template? What I have tried: <h1> {{title}} </h1> <ul> <li><a [routerLink]="['route1', { skipLocationChange: true }]">Route1</a></li> <li><a [routerLink]="['route2', { skipLocationChange: true }]">Route2</a></li> </ul> <router-outlet><

Access Parent @Component and vars from Routed Child Component

阅读更多关于 Access Parent @Component and vars from *Routed* Child Component

问题 I am trying to toggle a side nav menu, located at the top of my main App template using a button in a nested child component. I can't figure out how to get to the sidenav component in the parent to tell it to sidenav.open() . I know about @Input and @Output on a child component, but as I understand it, to use this I need to have some sort of DOM tag for the child component to attach these to? Such as: <app> <sidenav-component #sidenav>...</sidenav-component> <child [someInput]="some_parent

Angular2 relative route navigate in a guard

阅读更多关于 Angular2 relative route navigate in a guard

问题 We have child routes definitions presented here, in which we use a guard to check if the user has accepted terms before using our service. account/secret/secret.routes.ts: import { Routes } from '@angular/router'; import { SecretFormComponent } from './secret-form.component'; import { SecretTermsComponent } from './secret-terms.component'; import { TermsGuard } from './services/terms-guard.service'; export const secretRoutes: Routes = [ { path: '', redirectTo: 'form' }, { path: 'form',

TypeError: Cannot create property 'validator' on string 'abc@gmail.com' at setUpControl

阅读更多关于 TypeError: Cannot create property 'validator' on string 'abc@gmail.com' at setUpControl

问题 I face issue in formGroup . First Based on URL I take some value and call to API for retrieve particular user-data for pre-field text. register.html <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="form-horizontal"> <div class="form-group row"> <label for="inputEmail3" class="col-sm-4 ">Username</label> <div class="col-sm-8"> <input [formControl]="email" type="text" class="form-control" id="inputEmail3" placeholder="Email Address" [readonly]="isReadOnly"> </div> </div> </form

Authentication in Angular 2, handling the observables

阅读更多关于 Authentication in Angular 2, handling the observables

I just started with a Angular 2 project and am trying to get authentication up and running. Inspired by this tutorial I decided to do the following: Create a custom RouterOutlet class (extending it) to handle the authentication logic whenever a url is called. I succeeded in this custom class, but am still not sure how to check if a user is authenticated. My situation is as follows, I need to query a get call to a external API, for my development proces it is as follows: getAdmin() { let headers = new Headers({ 'Content-Type': 'application/json' }); let options = new RequestOptions({ headers:

angular 2 retain state from URL after redirect

阅读更多关于 angular 2 retain state from URL after redirect

问题 I start my angular app's index.html file at /app/123 and want to redirect to the controller handling /app with 123 to retain the information about what was queried initially. How can this be accomplished? 回答1: You have several choices: 1) You can retain information on a route using query parameters. That allows you to pass the same parameters back and forth between components. 2) Alternatively, you can build a service to hold onto your shared data. Services are a great way to hold onto data

angular 2 rc5 template parse error

阅读更多关于 angular 2 rc5 template parse error

I keep getting this error when I'm trying to create an angular routing link: zone.js:461 Unhandled Promise rejection: Template parse errors: Can't bind to 'routerLink' since it isn't a known property of 'a'. (" </h1> <button (click)="doLogin()">Login</button> <a [ERROR ->][routerLink]="['/createservice']" href="#">Post a Service</a> <router-outlet></router-outlet> "): AppComponent@4:3 ; Zone: <root> ; Task: Promise.then ; Value: BaseExceptionconsoleError @ zone.js:461 zone.js:463 Error: Uncaught (in promise): Template parse errors:(…) This is my code: <a [routerLink]="['/createservice']" href=

Angular2 this.router.navigate fires only once

阅读更多关于 Angular2 this.router.navigate fires only once

I have the following tab structure in my page, with it's respective URLs given in braces: Main Tab (/page) / | \ / | \ / | \ / | \ Sub Tab 1 Sub Tab 2 Sub Tab 3 (/page/a) (/page/b) (/page/c) Component @Input() route: string = ''; selectTab(tab) { let route = this.router.url.split('?')[0]; /* Here redirectUrl = "/page/c" */ if (tab.redirectUrl.length > 0) { // console.log(tab.redirectUr); gives /page/c this.router.navigate([tab.redirectUrl]); // This works but reloads the page and is a very bad idea. // window.location.href = tab.redirectUrl; } } Component.html NOTE: The actual code has a