Angular2 路由：单击路由器链接时页面未导航到我的视图组件答案

【问题标题】：Angular2 Routing: Page doesn't navigate to my view component on clicking router-linkAngular2 路由：单击路由器链接时页面未导航到我的视图组件
【发布时间】：2016-10-22 08:08:42
【问题描述】：

我已经创建了我的 app.routes.ts 并导入了所有相关的库。

此后，我将所有路径链接到它们的相关组件，如下所示：

import {ModuleWithProviders} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {AttendanceComponent} from './attendance/attendance.component';
import {LoginComponent} from './login/login.component';

//Route Configuration
export const routes: Routes = [
  {path: '', component: LoginComponent},
  {path: 'attendance', component: AttendanceComponent}
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

我在 my app.module 中提升了我的应用程序：

import { Component, NgModule } from '@angular/core';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

//declarations
import { AppComponent } from './app.component';
import { LoginComponent } from  './login/login.component';
import { AttendanceComponent } from './attendance/attendance.component';
import { routing, routes } from './app.routes';

//decorator
@NgModule({
  imports:      [
      BrowserModule,
      FormsModule,
      HttpModule,
      routing,
      RouterModule
    ],
  declarations: [
        AppComponent,
        LoginComponent,
        AttendanceComponent
      ],
  //put services
  //providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
  bootstrap: [ AppComponent ]
})
export class AppModule {
  //module class
}

在我的 app.component 上，我调用了我的目标网页

import {Component} from '@angular/core';
import {LoginComponent} from './login/login.component';

@Component({
  selector: 'oosc_app',
  template: `<login></login>`
})

export class AppComponent{
}

着陆页是login.template.html：

<body class="login">
<div id="login" class="login-position">
        <div class="logo">
            <a href="index.html"><img src="assets/images/oosc-logo-login.png" alt="" /></a>
        </div>

        <div class="wrapper-login">
            <input type="text" placeholder="TSC Number" class="user"/>
            <input type="password" placeholder="Password" class="password"/>
        </div>

        <!--<a [routerLink]="['/attendance']" class="login-button">Sign in</a>-->
        <a [routerLink]="['/attendance']"  class="login-button">Sign in</a>
        <router-outlet></router-outlet>
        <span>Not a member ?<a href="#">Create your account</a></span>
    </div>
</body>

路由器链接应将页面指向attendance.component.ts，然后显示视图。

问题是，当登录按钮点击时，它导航到 localhost:3000/attendance 但不坚持登录视图而不是出勤视图。

下面是我的attendance.component.ts：

//I have separated it into headers and footers and called the templateUrl
//in a component called Content

import {Component} from '@angular/core';
import {OnInit} from '@angular/core';
import {HeaderComponent} from '../partials/header.component';
import {FooterComponent} from '../partials/footer.component';
import {ContentComponent} from '../partials/content.component';

@Component({
  selector: 'attendance',
  //templateUrl:  `/app/attendance/attendance.template.html`
  template: `<header></header><footer></footer>`,
  providers: [HeaderComponent, ContentComponent, FooterComponent]
})

export class AttendanceComponent implements OnInit{
  ngOnInit(){
    console.log('ngOnInit');
  }
}

似乎是什么问题？

怎么没有导航到相关视图？

【问题讨论】：

标签： angular typescript angular2-routing angular2-template

【解决方案1】：

问题是您的模板中缺少 router-outlet。

template: `    
    <router-outlet></router-outlet>

    <!-- not required -->
        <login></login>      
    <!-- now you don't need to use <login> tag your router will load 
          login component into router-outlet because of your default defined path-->

`

【讨论】：