Angular 2导航
Angular 2导航
提问于 2017-07-09 00:45:22
我正在学习Angular 2，我在我的应用程序中遇到了一些导航问题。我有一个登录组件和一个应用程序组件。应用程序组件是索引文件：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
在我的app.module中，我创建了路由：
const appRoutes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'home', component: AppComponent }
];
在导入我的ngModule时，我这样做：
RouterModule.forRoot(
appRoutes,
{ enableTracing: true } // <-- debugging purposes only
)
但是当我在我的地址栏中写"/login“时，它会在"/home”中重定向我，为什么？如何显示我的登录页？我读了很多关于这方面的教程，但我什么都不懂。谢谢
编辑: LoginComponent：
import { Component } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
import { AuthService } from './../auth.service';
import {Router} from '@angular/router';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent {
email: string;
password: string;
constructor(public authService: AuthService, private router: Router) {
}
signup() {
this.authService.signup(this.email, this.password);
this.email = this.password = '';
}
login() {
this.authService.login(this.email, this.password).then(res => {
this.router.navigateByUrl('/kanban');
console.log("works");
}).catch(err => {
console.log("not works");
});
this.email = this.password = '';
}
logout() {
this.authService.logout();
}
}<div>
<h2>Simply Login</h2>
<form fxLayout="column">
<md-input-container>
<input [(ngModel)]="email" name="email" required mdInput type="email" placeholder="Email">
</md-input-container>
<md-input-container>
<input mdInput [(ngModel)]="password" name="password" required type="password" placeholder="Mot de passe">
</md-input-container>
<button (click)="login()" md-button type="submit">Se connecter</button>
</form>
</div>
回答 1
Stack Overflow用户
发布于 2017-07-09 00:56:24
在app.component的模板中放入以下内容
<router-outlet></router-outlet>以及在路由中
const appRoutes: Routes = [
{ path: 'login', component: LoginComponent },
];app.component中的应用程序Angular start是根组件
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44988511
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号