Angular2路由：頁面在點擊路由器鏈接時不導航到我的視圖組件

我創建了我的app.routes.ts並導入了所有相關的庫。Angular2路由：頁面在點擊路由器鏈接時不導航到我的視圖組件

之後，我聯繫的所有路徑及其相關組件是這樣的：

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);

我boostrapped我的應用程序在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後顯示視圖。

的問題，而在按鈕點擊的標誌，它定位到本地主機：3000 /考勤但不枝與登錄視圖，而不是出席視圖。

下面是我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'); 
    } 
}

出了什麼問題？

它怎麼沒有導航到相關的視圖？

來源

2016-10-22 Norman Munge

問題是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--> 

`

來源

2016-10-22 08:14:44 micronyks

Angular2路由：頁面在點擊路由器鏈接時不導航到我的視圖組件

回答

相關問題