angular router

login.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'login',
    template: `
        <h1>这是登录页面</h1>
    `
})

export class LoginComponent implements OnInit {
    constructor() { }

    ngOnInit() { }
}

register.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'register',
    template: `
        <h1>这是注册页面</h1>
    `
})

export class RegisterComponent implements OnInit {
    constructor() { }

    ngOnInit() { }
}

app.componet.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
      <h1>Hello {{name}}</h1>
      <router-outlet></router-outlet>
  `,
})
export class AppComponent  { name = 'New Year'; }

app.router.ts

//a-module-routing
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { LoginComponent } from './demo15/login.component';
import { RegisterComponent } from './demo15/register.component';

const routes: Routes = [
  { path: '', component: LoginComponent},
  { path: 'myLogin', component: LoginComponent },
  { path: 'myRegister', component: RegisterComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)], //注意forRoot和footChild的区别
  exports: [RouterModule],
})
export class AppRoutingModule { }

app.module.ts

import { AppRoutingModule} from './app.router';

import { LoginComponent} from './demo15/login.component';

import { RegisterComponent} from './demo15/register.component';

@ NgModule({

providers:[ HeartService, MyHttpService],

imports: [ BrowserModule, FormsModule, HttpModule, AppRoutingModule ],

补：

login.component.ts

import { Component, OnInit } from '@angular/core';
import {Router} from '@angular/router';

@Component({
    selector: 'login',
    template: `
        <h1>这是登录页面</h1>
        <button (click)="jumpToRegister()">没有账号，去注册</button>
        <a routerLink="/myRegister">注册</a>
    `
})

export class LoginComponent implements OnInit {
    constructor(private myRouter:Router) { }

    ngOnInit() { }

    jumpToRegister(){
        this.myRouter.navigateByUrl('myRegister');
    }
}

main.component.ts

import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';

@Component({
    selector: 'main',
    template: `
        <h1>Main</h1>
        <button (click)="backToPre()">返回上一页</button>
    `
})

export class MainComponent implements OnInit {
    constructor(private myLocation:Location) { }

    ngOnInit() { }

    backToPre(){
        this.myLocation.back();  //还有forword函数
    }
}

补：

app.route.ts

{ path: '**', component: NotFoundComponent }

notfound.component.ts

import { Component, OnInit } from '@angular/core';
import {Router} from '@angular/router';

@Component({
    selector: 'notfound',
    template: `
        <h1>您访问的资源不存在</h1>
    `
})

export class NotFoundComponent implements OnInit {
    constructor(private myRouter:Router) { }

    ngOnInit() {
        setTimeout(()=>{
            this.myRouter.navigateByUrl('myLogin'); 
        },2000);
    }
}