模拟需求
现在超市里面有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',
})
