angular 路由

1. vscode編輯器快速新建主路由：

ng-router

注意修改為 根路由為：‘forRoot()’

app-route.module.ts;

{ path:'',redirectTo:'/login',pathMatch:'full' } 

當路由為空的時候，會重定向到/login路由，必須加上pathMatch:'full'

import { Routes, RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

const routes: Routes = [
    { path: 'path', component: AppComponent }
　　 { path:'',redirectTo:'/login',pathMatch:'full' }

    //{ path: 'path/:routeParam', component: MyComponent },
    //{ path: 'staticPath', component: ... },
    //{ path: '**', component: ... },
    //{ path: 'oldPath', redirectTo: '/staticPath' },
    //{ path: ..., component: ..., data: { message: 'Custom' }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {}

2. 快速新建子路由：

ng-router-featuremodule

子路由login-route.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './login/login.component';

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

@NgModule({
    imports: [CommonModule, RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class LoginRoutingModule {}

?3. 在app.component.html中加入

<router-outlet></router-outlet>

<mat-drawer-container class="example-container site" autosize>
  <header>
    <app-header  (toggle)="drawer.toggle()"></app-header>
  </header>
  <mat-drawer #drawer class="example-sidenav" mode="side">
    <app-sidebar></app-sidebar>
  </mat-drawer>
  <main>
      <router-outlet></router-outlet>
  </main>
  <footer>
    <app-footer></app-footer>
  </footer>
</mat-drawer-container>

?4. html模板路由跳轉方式：

<a href="" [routerLink]="['/register']">注冊</a>