0
app.routes.tsを作成し、関連するすべてのライブラリをインポートしました。私はmy app.moduleに私のアプリをboostrappedAngular2 Routing：ページがルータのリンクをクリックすると、ビューコンポーネントに移動しません
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);
：私のapp.componentで
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
}
を、私は私を呼ば
はその後、私はこのような彼らの関連するコンポーネントへのすべてのパスをリンクランディングページ
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');
}
}
問題のようですか？
どのように関連するビューにナビゲートしていないのですか？