angular 9打造用户系统-2
本片使用ngrx store和ngrx reducer加载用户列表
github代码:https://github.com/shyandsy/angular-9-ngrx-user-mamagement
原教程视频连接
步骤
- 安装ngrx依赖
npm install @ngrx/store @ngrx/effects @ngrx/entity @ngrx/store-devtools @ngrx/router-store
- 创建第一个action和reducer
创建src\app\users\user.model.ts
import { Time } from '@angular/common'
export interface User{
id?: number;
username: string;
cnname: string;
enname: string;
password?: string;
role_id: number;
email: string;
telephone: string;
mobile: string;
fax: string;
address: string;
post: string;
token: string;
expired: Time;
status: number;
ip: string;
}
创建src\app\users\user.service.ts, 稍后实现
创建src\app\users\state文件夹
创建src\app\users\state\user.actions.ts
创建src\app\users\state\user.reducer.ts
- 修改src\app.module.ts
//加入
import { StoreModule } from '@ngrx/store';
imports: [
BrowserModule,
// 加入这行
StoreModule.forRoot({}), // 在module中添加reducer
AppRoutingModule,
],
- 修改src\app\users\users.module.ts
//加入
import { StoreModule } from '@ngrx/store';
import { userReducer } from './state/user.reducer';
imports: [
CommonModule,
RouterModule.forChild(userRoutes),
// 加入,给user module添加UserReducer
StoreModule.forFeature("users", userReducer),
],
- 编写userReducer, src\app\users\state\user.reducer.ts
import { formatDate } from '@angular/common';
// 定义一个initialState
let date = new Date();
const initialState = {
users: [
{
username: "shyclouds",
cnname: "李连杰",
enname: "Jack Li",
password: "",
role_id: 1,
email: "shyclouds@shyclouds.com",
telephone: "01022334441",
mobile: "13122334455",
fax: "01022334442",
address: "北京市长安街128号",
post: "10001",
token: "xxxxx",
expired: new Date(),
status: 1,
ip: "127.0.0.1",
}
],
loading: false,
loaded: true,
}
// 定义userReducer
export function userReducer(state = initialState, action){
switch(action.type){
case "LOAD_USERS":{
return {
...state,
loading: true,
loaded: false,
}
}
default: {
return state;
}
}
}
- 修改src\app\users\user-list\user-list.component.ts,加载数据
import { Component, OnInit } from '@angular/core';
// 加入这行
import { Store } from '@ngrx/store';
// 引入User model
import {User} from './../user.model';
import { THIS_EXPR } from '@angular/compiler/src/output/output_ast';
@Component({
selector: 'app-user-list',
templateUrl: './user-list.component.html',
styleUrls: ['./user-list.component.css']
})
export class UserListComponent implements OnInit {
//存储当前users
users: User[];
// 注入store
constructor(private store: Store<any>) { }
ngOnInit(): void {
// 加载users
this.store.dispatch({type: 'LOAD_USERS'});
// 订阅state.users
this.store.subscribe(state => (this.users = state.users.users));
}
}
- 修改模板src\app\users\user-list\user-list.component.html
<h3>Users</h3>
<table class="table table-hover">
<thead>
<tr class="table-primary">
<th scope="col">用户名</th>
<th scope="col">角色</th>
<th scope="col">中文名</th>
<th scope="col">英文名</th>
<th scope="col">Email</th>
<th scope="col">电话</th>
<th scope="col">手机</th>
<th scope="col">传真</th>
<th scope="col">地址</th>
<th scope="col">邮编</th>
<th scope="col">状态</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
<!--输出user-list.component中的users列表-->
<tr *ngFor="let user of users">
<th scope="row">{{user.username}}</th>
<td>{{user.role_id}}</td>
<td>{{user.cnname}}</td>
<td>{{user.enname}}</td>
<td>{{user.email}}</td>
<td>{{user.telephone}}</td>
<td>{{user.mobile}}</td>
<td>{{user.fax}}</td>
<td>{{user.address}}</td>
<td>{{user.post}}</td>
<td>{{user.status}}</td>
<th>
<a>修改</a>
<br>
<a>删除</a>
</th>
</tr>
</tbody>
</table>
学习了。重中之重