angular router

￡神魔★判官ぃ 2022-06-01 06:44 99阅读 0赞

import { Component, OnInit } from '@angular/core';
    
    @Component({
        selector: 'login',
        template: `
            <h1>这是登录页面</h1>
        `
    })
    
    export class LoginComponent implements OnInit {
        constructor() { }
    
        ngOnInit() { }
    }

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 \],

补：

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