通过Angular2中的链接路由答案

【问题标题】：Routing through links in Angular2通过Angular2中的链接路由
【发布时间】：2018-02-06 06:31:33
【问题描述】：

我是 Angular 2 的新手，我仍处于学习阶段，但我陷入了一个问题，没有找到解决方案。请帮忙。

我已经查看了一个登录视图，然后单击该链接后的链接将重定向到主页，然后单击该链接将重定向到其他视图。

下面是我的代码结构：

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:

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：

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：

<a routerLink="Login">Login</a>
<br />
<div>
    <router-outlet></router-outlet>
</div>

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() {

    }
}

第一页正常，但是点击主页后出现错误：

Cannot match any routes. URL Segment: 'Login/Home

我知道链接会像 /login、/home 等而不像 /login/home 但如何实现它，因为我没有得到它的解决方案而且我对它完全陌生。

【问题讨论】：

标签： angular2-routing

【解决方案1】：

而不是只给<h1><a routerLink="Home">Home</a> 您需要在链接之前添加 /，例如 <h1><a routerLink="/Home">Home</a>。

【讨论】：