新增和列表组件关系

之前的我的项目的设计中，列表组件和新增组件是兄弟组件。

const routes: Routes = [  {    path: '',    component: IndexComponent  },  {    path: 'add',    component: VehicleAddComponent,  },  {    path: 'edit/:id',    component: VehicleEditComponent,  },];
  • 开始时，位于列表组件index。
  • 点击新增，跳到add路由，此时加载add组件，并且index组件销毁。
  • 新增实现后，须要回跳到index组件。此时须要从新加载index组件，显示第一页的内容。

这样就会导致一个问题，假如原来处在第二页进行编辑或新增，当操作实现之后，并没有回跳到原来的页面。而是加载第一页的内容。

基与这个问题，咱们能够尝试把 新增 和 编辑 组件变成 列表 的子组件

同时，咱们须要解决 新增或编辑的内容，不能实时的反馈到父组件中 这个问题。

indexComponet:

@Component({  selector: 'app-project',  templateUrl: './index.component.html',  styleUrls: ['./index.component.css']})export class IndexComponent implements OnInit {  component = 'index' as 'index' | 'add';}

index.html:

<app-add *ngIf="component === 'add'" (isFinish)="onAddFinish($event)"></app-add><div class="mt-3" *ngIf="component === 'index'"><button thyButton="success" type="button" (click)="component = 'add'">New Project</button>    // index组件内容</div>

次要思路就是定义componet变量，当值为'index'时，显示列表内容， 当值为 'add'时，
显示列表组件的内容。

同时，在子组件中设置@Output()， 当创立实现后，弹射该实体值。

AddComponent:

@Component({  selector: 'app-add',  templateUrl: './add.component.html',  styleUrls: ['./add.component.css']})export class AddComponent implements OnInit {  @Output()  isFinish = new EventEmitter<Project | null>(); onSubmit(xxx: xxx) {    this.projectService.save(xxx)      .subscribe({        next: project => {          this.notifyService.success('创立胜利！');          this.isFinish.emit(project);        },        error: err => {          console.log(err);        }      })  }  /**   * 返回   */  backWard() {    this.isFinish.emit(null);  }

indexController:

接管弹射值，若弹射实体，表明新增实现，更新到列表中。 若为null， 则表明是返回，返回index界面。

/**   * 新增组件实现后，更新到列表组件中   * @param $event   */  onAddFinish($event: Project | null) {    if($event) {      this.pageData.content.push($event);    }    this.component = 'index';  }

这样就可能在不从新加载列表组件的状况下，实现新增操作。

NGXS

通过老师的的领导，尝试应用NGXS来进行,状态治理。

Ngxs外围概念:

  • Store: 全局状态容器，操作调度程序和选择器
  • Actions: 形容要采取的操作及其关联元数据的类
  • State: 状态的类定义
  • Selects: 状态选择器

通过看官网文档，和查阅相干材料。大略是如下的样子：

一: 注册

  • 在 app.module.ts 中注册，NgxsModule.forRoot([ZoosState]) 即可

二：定义Action

新建一个文件action文件。

新建action 定义

import {Project} from '../../../entity/project';export class AddProject {  static readonly type = '[project] addProject';  constructor(public project: Project) {}}

三： 新建State
State是定义状态容器的类。

这里定义一个状态，它将监听一个addProject动作。

export interface ProjectModel {  project: Project}@State<ProjectModel>({  name: 'project',  defaults: {    project: {} as Project  },})@Injectable() // 也能够依赖注入export class ProjectState {  @Selector()  static getProject(state: ProjectModel) {    return state.project;  }  constructor(private projectService: ProjectService) {}  @Action(AddProject)  addProject(context: StateContext<Project>, action: AddProject) {    const {project} = action;    return this.projectService.saveByToken(project.projectToken).pipe(      tap(project => {        context.patchState(project)      })    )  }}

四： 派发 dispatch

export class AddComponent implements OnInit {onSubmit(formGroup: FormGroup) {    const newProject = {      projectToken: formGroup.get(this.formKeys.projectToken)?.value,    } as Project;        this.store.dispatch(new AddProject(newProject))      .subscribe({        next: (project)=> {          console.log(project);        }      })  }}

大抵的流程是这样，但可能因为某些中央不太熟悉，写错了，最初数据没能进去。

感想：
因为以前的开发方法不太一样，所以会感觉到有一些难了解。还没有齐全了解它的概念的用法。

subscribe的扭转

另外值得注意的就是新版本中弃用了该subscribe办法的某些签名,

这种弃用是在 RxJS 6.4 中引入的。

弃用了所有subscribe须要超过 1 个参数的签名,也弃用了仅传递error回调的签名。

目前把参数都写到一个大括号中：

this.labelService.update(this.label.id, newLabel)      .subscribe({        next: label => {          this.notifyService.success(`label edit success`);        },        error: err => {          console.log(err);          this.notifyService.error('申请失败', err);        }      })

相似这种模式。

of([1,2,3]).subscribe({    next: (v) => console.log(v),    error: (e) => console.error(e),    complete: () => console.info('complete') })