typescript 基本的子路由

Posted 2021-05-21

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

@Component({
  template:
  `<h1>Master</h1>
   <a routerLink='child1'>Child1</a>
   <a routerLink='child2'>Child2</a>
   <router-outlet></router-outlet>
  `,
  selector:"app-root"
})
export class Master{

}

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

@Component({
  selector:"child22",
  template:`<h1>Child22</h1>`
})
export class Child22{
}

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

@Component({
  selector:"child21",
  template:`<h1>Child21</h1>`
})
export class Child21{
}

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

@Component({
  selector:"child12",
  template:`<h1>Child12</h1>`
})
export class Child12{
}

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

@Component({
  selector:"child11",
  template:`<h1>Child11</h1>`
})
export class Child11{
}

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

@Component({
  selector:"child2",
  template:`
    <h1>Child2</h1>
    <a routerLink='child21'>Subchild21</a>
    <a routerLink='child22'>Subchild22</a>
    <router-outlet></router-outlet>`

})
export class Child2{
}

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

@Component({
  selector:"child1",
  template:`
    <h1>Child1</h1>
    <a routerLink='child11'>Subchild11</a>
    <a routerLink='child12'>Subchild12</a>
    <router-outlet></router-outlet>`
})
export class Child1{
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import {AppRoutingModule} from "./app-routing.module";

import { Master } from './master';
import { Child2 } from './child2';
import { Child1 } from './child1';
import { Child11 } from './child11';
import { Child12 } from './child12';
import { Child21 } from './child21';
import { Child22 } from './child22';

@NgModule({
  declarations: [
    Master,
    Child1,
    Child2,
    Child11,
    Child12,
    Child21,
    Child22
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  bootstrap: [Master]
})
export class AppModule  { }

import { NgModule } from '@angular/core';
import {RouterModule,Routes} from '@angular/router';

import { Child1 } from './child1';
import { Child2 } from './child2';
import { Child11 } from './child11';
import { Child12 } from './child12';
import { Child21 } from './child21';
import { Child22 } from './child22';

const routes: Routes =[
  {
    path:"child1",
    component:Child1,
    children:[
      {
        path:"child11",
        component:Child11
      },
      {
        path:"child12",
        component:Child12
      }
    ]
  },
  {
    path:"child2",
    component:Child2,
    children:[
      {
        path:"child21",
        component:Child21
      },
      {
        path:"child22",
        component:Child22
      }
    ]
  }
]

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