通过Angular2中的链接进行路由 [英] Routing through links in Angular2
问题描述
我是Angular 2的新手,我仍处于学习阶段,但是我陷入了一个问题,没有找到解决方案.请帮忙.
I am new in Angular 2 and I am still in learning phase, but I stuck in a problem and not getting the solution to it. Please help.
我已经查看了登录名,然后单击该链接后将重定向到主页,然后单击该链接将重定向到其他视图.
I have made a view of a login, then a link to it after clicking the link it will redirect to home then clicking a link there it will redirect to some other view.
下面是我的代码结构:
app.routing.ts:
app.routing.ts:
import { Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { UsersComponent } from './users/usercomponent';
export const routes: Routes = [
{ path: 'Home', component: HomeComponent },
{ path: 'Login', component: LoginComponent },
{ path: 'User', component: UsersComponent },
];
app.module.ts:
app.module.ts:
import { FormsModule } from '@angular/forms';
import { routes } from './app.routing';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
import { UsersComponent } from './users/usercomponent';
@NgModule({
imports: [BrowserModule, FormsModule, RouterModule.forRoot(routes)],
declarations: [AppComponent, LoginComponent, HomeComponent, UsersComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts:
app.component.ts:
import { Component } from '@angular/core';
import { OnInit } from '@angular/core';
@Component({
selector: 'app-initializer',
templateUrl: './app.component.html'
})
export class AppComponent {
title = 'Some NAme'
}
app.component.html:
app.component.html:
<a routerLink="Login">Login</a>
<br />
<div>
<router-outlet></router-outlet>
</div>
login.component.ts:
login.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'login',
template: `
<h1><a routerLink="Home">Home</a>
<a routerLink="User">Users</a></h1>
<div>
<router-outlet></router-outlet>
</div>
`
})
export class LoginComponent {
constructor() {
}
}
第一页正在工作,但单击主页后出现错误:
The first page is working but after clicking home it is giving an error:
Cannot match any routes. URL Segment: 'Login/Home
我知道该链接将类似于/login,/home等,而不是/login/home,但是如何实现它,因为我没有得到解决方案,而我是一个全新的人.
I know that the link will be like / login, /home etc not like /login/home but how to implement it as I am not getting the solution for it and I am completely new to it.
推荐答案
而不是仅提供<h1><a routerLink="Home">Home</a>
您需要在<h1><a routerLink="/Home">Home</a>
之类的链接之前添加/.
Instead of giving only <h1><a routerLink="Home">Home</a>
you need to add / before the link like <h1><a routerLink="/Home">Home</a>
.
这篇关于通过Angular2中的链接进行路由的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!