模擬需求
現(xiàn)在超市里面有2部分信息要展示许布，1員工信息 2.產(chǎn)品信息球及。其中產(chǎn)品信息有2個(gè)分類，并且要展示2個(gè)分類的具體信息
關(guān)鍵點(diǎn)
Router
RouterModule.forRoot
RouterModule.forChild
注意：forChild的時(shí)候注冊Component需要在對應(yīng)Module中創(chuàng)建
步驟
1. 創(chuàng)建一個(gè)Index
創(chuàng)建一個(gè)index來告訴用戶我們是有2個(gè)大分類的 （員工，產(chǎn)品）
index.component.ts
import { OnInit, Component } from '@angular/core';
@Component({
templateUrl: './index.component.html'
})
export class IndexComponent implements OnInit {
ngOnInit(): void {
}
}
index.component.html
<!-- 簡單的創(chuàng)建2個(gè)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">產(chǎn)品</button>
2. 創(chuàng)建 員工和產(chǎn)品
創(chuàng)建員工信息
1. employee.ts
// 員工信息的Modle
export class Employee {
id: number;
name: String;
post: String;
postId: number;
}
2. employee-factory.ts
// 仿造工廠類 - 產(chǎn)生員工信息
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({
// 這個(gè)地方個(gè)人也不是很理解 自定義出來的其他怎么處理
selector: 'app-root',
templateUrl: './employee.component.html',
})
export class EmployeeComponent implements OnInit {
private employees: Employee[];
constructor(private router: Router) { }
// 生命周期 在初始化的時(shí)候把 employees 初始化
ngOnInit(): void {
this.employees = DEFAULT_EMPLOYEE;
}
}
4. employee.component.html
<!-- UI 一個(gè)簡單的For循環(huán)展示 -->
<li *ngFor="let employee of employees">
{{employee.post}} {{employee.name}}
</li>
創(chuàng)建產(chǎn)品
product.ts
// 產(chǎn)品信息的定義 定義一個(gè)id和name和type分類
export class Product {
id: number;
name: string;
type: number;
}
product-factory.ts
// 工廠類來創(chuàng)建當(dāng)前產(chǎn)品的分類
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 循環(huán)來展示一下我們當(dāng)前擁有的 產(chǎn)品 -->
<!-- click點(diǎn)擊來顯示詳情 -->
<button *ngFor="let product of mProductList" (click)="viewInfo(product.id)">
{{product.id}} {{product.name}}
</button>
<br />
<!-- 子路由顯示區(qū)域， 我們用來顯示 產(chǎn)品信息的 -->
<router-outlet></router-outlet>
fruit.component.ts
# 簡單的顯示一下水果的信息
# 這個(gè)是子路由顯示
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
# 創(chuàng)建一個(gè) 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 = [
{
# 這個(gè)地方 path要為空莽鸭，因?yàn)檫@個(gè)是需要上層傳過來的
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',
})
