Angular2不能用路由器导航
angular2 cannot navigate with router
用户点击登录按钮后,我试图导航到另一条路线。但我不明白哪里出了问题。下面是我的登录组件。
import { Component, OnInit } from '@angular/core';
import { AngularFire, AuthProviders, AuthMethods } from 'angularfire2';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
constructor(public af: AngularFire, private router: Router) {
this.af.auth.subscribe(auth => console.log(auth));
}
login() {
this.af.auth.login({
provider: AuthProviders.Google,
method: AuthMethods.Popup,
}).then(function(res) {
console.log('login success');
console.log(res.uid);
this.router.navigateByUrl('/main') // .then(r => console.log('then: ' + r))
.then(function(resw) {
console.log('has redirect');
})
.catch(err => console.error(err)) ;
console.log('afterward');
}).catch(err => console.error(err));
}
overrideLogin() {
this.af.auth.login({
provider: AuthProviders.Anonymous,
method: AuthMethods.Anonymous,
});
}
ngOnInit() {
}
}
<p>
login works!
</p>
<button (click)="login()">Login With Google</button>
<button (click)="overrideLogin()">Login Anonymously</button>
这是我的路线:
import { LoginComponent } from './login/login.component';
import { MainComponent } from './main/main.component';
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router' ;
const APP_ROUTES: Routes = [
{ path: 'login', component: LoginComponent },
{ path: '', pathMatch: 'full', redirectTo: '/login'},
{ path: 'main', component: MainComponent }
];
export const appRoutingProviders: any[] = [
];
export const APP_ROUTES_PROVIDER: ModuleWithProviders = RouterModule.forRoot(APP_ROUTES);
这里是@NgModule:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
// import routing
import { appRoutingProviders, APP_ROUTES_PROVIDER } from './app.routes' ;
@NgModule({
declarations: [
AppComponent,
LoginComponent,
MainComponent
],
imports: [
BrowserModule,
// AngularFireModule.initializeApp(firebaseConfig, myFirebaseAuthConfig), // angularfire setup
FormsModule,
HttpModule,
APP_ROUTES_PROVIDER
],
providers: [appRoutingProviders],
bootstrap: [AppComponent]
})
export class AppModule { }
我得到了以下错误。有人能帮助让我知道如何解决这个问题吗?
TypeError: this is null Stack trace: LoginComponent</LoginComponent.prototype.login/<@http://localhost:4200/main.bundle.js:70294:13 Zone$1</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:4200/main.bundle.js:69125:19 NgZoneImpl/this.inner<.onInvoke@http://localhost:4200/main.bundle.js:56178:28 Zone$1</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:4200/main.bundle.js:69124:19 Zone$1</Zone</Zone.prototype.run@http://localhost:4200/main.bundle.js:69018:24 scheduleResolveOrReject/<@http://localhost:4200/main.bundle.js:69384:52 Zone$1</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:4200/main.bundle.js:69158:23 NgZoneImpl/this.inner<.onInvokeTask@http://localhost:4200/main.bundle.js:56169:28 Zone$1</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:4200/main.bundle.js:69157:23 Zone$1</Zone</Zone.prototype.runTask@http://localhost:4200/main.bundle.js:69058:28 drainMicroTaskQueue@http://localhost:4200/main.bundle.js:69290:25 ZoneTask/this.invoke@http://localhost:4200/main.bundle.js:69230:25
箭头函数(()=>)将解决问题,因为每个配置都是正确的。
login() {
this.af.auth.login({
provider: AuthProviders.Google,
method: AuthMethods.Popup,
}).then((res)=> { //<----changed this line
console.log('login success');
console.log(res.uid);
this.router.navigateByUrl('/main') // .then(r => console.log('then: ' + r))
.then((resw)=> { //<----changed this line
console.log('has redirect');
})
.catch(err => console.error(err)) ;
console.log('afterward');
}).catch(err => console.error(err));
}
this
在javascript中是特殊的,它取决于函数如何被调用,参见如何在回调中访问正确的' this '上下文?
在类型脚本中,如果你使用胖箭头=>
,它会为你缓存这个,例如this.af.auth.login({}).then((res) => {})
- 父页面的角度路由器导航高亮显示
- 骨干路由器导航和锚定href
- 使用 ui 路由器导航到非默认状态
- React路由器:防止导航到目标路由
- 针对浏览器的不同响应的Backbone.js路由器模式“;背面“;按钮或直接导航
- 可以't使用URL导航到ui路由器状态
- 骨干路由器.导航如何传递动态ID
- 来回导航时删除/取消UI路由器中的动画
- 使用 react 路由器在页面部分内导航
- 有条件地导航到带有角度 ui 路由器的状态
- 主干路由器导航到../#/<路由>而不触发路由器事件.如何
- 将导航选项卡样式类设置为活动,如果当前在该路由中 反应反应路由器.
- 父路由器激活功能在每次导航到其子路由时运行
- 从反应路由器检索后退导航操作
- 使用 ui 路由器的浏览器导航控件
- 反应路由器导航栏导航
- React路由器和导航按钮
- 使用ui路由器导航到嵌套的命名视图
- React redux connect()'s的mapStateToProps在react路由器导航上被多次调用
- Angularjs导航菜单,带有UI引导选项卡和UI路由器