模拟需求

现在超市里面有2部分信息要展示，1员工信息 2.产品信息。其中产品信息有2个分类，并且要展示2个分类的具体信息

关键点

Router
RouterModule.forRoot
RouterModule.forChild

注意：forChild的时候注册Component需要在对应Module中创建

步骤

1. 创建一个Index

创建一个index来告诉用户我们是有2个大分类的 （员工，产品）

index.component.ts

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


@Component({
    templateUrl: './index.component.html'
})

export class IndexComponent implements OnInit {
    ngOnInit(): void {

    }
}

index.component.html

<!-- 简单的创建2个button来表示一下即可 -->
<!-- routerLink 是路由在html中的使用 -->
<!--The content below is only a placeholder and can be replaced.-->
<button routerLink="/employee" routerLinkActive="active">职位</button>
<button routerLink="/product" routerLinkActive="active">产品</button>

2. 创建 员工和产品

创建员工信息

1. employee.ts

// 员工信息的Modle
export class Employee {
    id: number;
    name: String;
    post: String;
    postId: number;
}

2. employee-factory.ts

// 仿造工厂类 - 产生员工信息
import { Employee } from './employee';

export const DEFAULT_EMPLOYEE: Employee[] = [
    { id: 1, name: '张三', post: '售货员', postId: 1 },
    { id: 2, name: '李四', post: '收银员', postId: 2 }
];

3. employee.component.ts

// 逻辑信息展示
import { DEFAULT_EMPLOYEE } from './employee-factory';
import { Router } from '@angular/router';
import { OnInit, Component } from '@angular/core';
import { Employee } from './employee';


@Component({
    // 这个地方个人也不是很理解 自定义出来的其他怎么处理
    selector: 'app-root',
    templateUrl: './employee.component.html',
})


export class EmployeeComponent implements OnInit {
    private employees: Employee[];

    constructor(private router: Router) { }
    // 生命周期 在初始化的时候把 employees 初始化
    ngOnInit(): void {
        this.employees = DEFAULT_EMPLOYEE;
    }

}

4. employee.component.html

<!-- UI 一个简单的For循环展示 -->
<li *ngFor="let employee of employees">
  {{employee.post}} {{employee.name}}
</li>

创建产品

product.ts

// 产品信息的定义 定义一个id和name和type分类
export class Product {
  id: number;
  name: string;
  type: number;
}

product-factory.ts

// 工厂类来创建当前产品的分类

import {Product} from './product';

export const DEFAULT_PRODUCTS: Product[] = [
  {id: 1, name: '水果', type: 1},
  {id: 2, name: '蔬菜', type: 2}
];

product.component.ts

import { Component, OnInit } from '@angular/core';
import { Product } from './product';
import { DEFAULT_PRODUCTS } from './product-factory';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './product.component.html',
})

export class ProductComponent implements OnInit {
  private mProductList: Product[];

  constructor(private router: Router) {
  }

  ngOnInit(): void {
    this.mProductList = DEFAULT_PRODUCTS;
  }

  // 查看具体的信息
  viewInfo(id: number): void {
    if (id === 1) {
      this.router.navigate(['/product/fruit']);
    } else if (id === 2) {
      this.router.navigate(['/product/vegetables']);
    }
  }

}

product.component.html

<!-- For 循环来展示一下我们当前拥有的 产品 -->
<!-- click点击来显示详情 -->
<button *ngFor="let product of mProductList" (click)="viewInfo(product.id)">
  {{product.id}} {{product.name}}
</button>
<br />

<!-- 子路由显示区域， 我们用来显示 产品信息的 -->
<router-outlet></router-outlet>

fruit.component.ts

# 简单的显示一下水果的信息
# 这个是子路由显示

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

@Component({
    template: '<a> 水果的信息 </a>'
})

export class FruitComponent implements OnInit {


    constructor(private router: Router) {
    }

    ngOnInit(): void {
    }
}

vegetables.component.ts

# 来展示蔬菜的具体信息

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

@Component({
    template: '<a> 蔬菜的信息 </a>',
})

export class VegetablesComponent implements OnInit {


    constructor(private router: Router) {
    }

    ngOnInit(): void {
    }
}

配置路由

方法1

import { ProductComponent } from './product/product.component';
import { IndexComponent } from './index/index.component';
import { EmployeeComponent } from './employee/employee.component';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
    { path: '', redirectTo: '/index', pathMatch: 'full' },
    { path: 'index', component: IndexComponent },
    {
        path: 'product',
        component: ProductComponent,
        children: [
            { path: 'fruit', component: FruitComponent },
            { path: 'vegetables', component: VegetablesComponent },
        ]
    },

    { path: 'employee', component: EmployeeComponent }
];

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

export class AppRoutingModule { }

# 注意
所有的component 需要在app.module 中注册一下

方法2

# 创建一个 product.module 来配置子路由
import { VegetablesComponent } from './vegetables/vegetables.component';
import { FruitComponent } from './fruit/fruit.component';
import { ProductComponent } from './product.component';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';

export const ROUTES: Routes = [
  {
    # 这个地方 path要为空，因为这个是需要上层传过来的
    path: '',
    children: [
      { path: 'fruit', component: FruitComponent },
      { path: 'vegetables', component: VegetablesComponent },
    ]
  }
];

@NgModule({

  declarations: [
    FruitComponent,
    VegetablesComponent,
  ],

  imports: [
    CommonModule,
    RouterModule.forChild(ROUTES)
  ],
})

export class ProductModule {
}

# 注意：
# FruitComponent 和  VegetablesComponent 要在这里注册，不能在app.modules中注册

# app-routing.module.ts 修改为 loadChildren

import { ProductComponent } from './product/product.component';
import { IndexComponent } from './index/index.component';
import { EmployeeComponent } from './employee/employee.component';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
    { path: '', redirectTo: '/index', pathMatch: 'full' },
    { path: 'index', component: IndexComponent },
    {
        path: 'product',
        component: ProductComponent,
        loadChildren: './product/product.module#ProductModule'
    },

    { path: 'employee', component: EmployeeComponent }
];

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

export class AppRoutingModule { }

疑问

1. 为什么路由要这么声明

constructor(private router: Router) {
}

2. selector 怎么修改和配置和使用

@Component({
  selector: 'app-root',
  templateUrl: './product.component.html',
})

源码地址

https://github.com/i-show/angular-Router