关于前端:Angular-Input-Output

前言

在之前的学习过程中，对于 @Input 和 @Output 这两个组件传值办法就不是很相熟，最近写的性能就用到了这方面的常识，而后又看了一遍教程，趁着这个机会把这两个办法的应用搞明确了。

@Input

/** issue-paper-course-checkbox */
 @Input()
  set primaryIssuePaperCourseList(value: Array<Course>) {
    /** 设置原列表 */
    this.issuePaperState.primaryIssuePaperCourses = value;
    /** 如果没有值，return */
    if (!this.issuePaperState.primaryIssuePaperCourses) {return;}
    /** 为传入的专业课设置默认选中 */
    this.issuePaperState.primaryIssuePaperCourses.forEach((issuePaperCourse: Course) => {this.issuePaperState.issuePaperCheckedMap.set(issuePaperCourse.id, true);
    });
  }

下面是一个课程的抉择组件的输出办法，次要目标是在其利用组件获取到 user 的组卷课程之后，输出到该组件中，而后进行解决，上面看一下利用组件传值的代码：

/** user -> edit.html **/
[primaryIssuePaperCourseList]="userForm.getRawValue()?.issuePaperCourses"

/** user -> edit.component.ts **/
this.userForm.setValue({
      name: user.name,
      username: user.username,
      jobNumber: user.jobNumber,
      sex: user.sex,
      certificateNumber: user.certificateNumber,
      roles: user.roles,
      college: user.college,
      courses: user.courses,
      issuePaperCourses: user.issuePaperCourses,
    });

userForm.getRawValue()?.issuePaperCourses 获取到的就是 user 的所有组卷课程，获取到这些课程之后，就把这些课程输出给组件：app-issue-paper-course-checkbox，交给该组件解决，以上是为传入的组卷课程设置选中的属性，以便在显示时达到上面的成果：

@Output

@Output 是子组件向父组件传值的办法

 /** issue-paper-course-checkbox */
 @Output()
  issuePaperCourseSelect: EventEmitter<Array<Course>> = new EventEmitter();
  constructor(private courseService: CourseService) {}

在 angular 中组件通过定义 EventEmitter 事件弹射器 的形式来向处发送数据。从实质上来讲，EventEmitter 事件弹射器 也是个可被观察者，它提供的性能是：如果本组件产生了某个事件，就会通过 EventEmitter 事件弹射器 来发送告诉，如果你想获取到这些告诉，那么只须要订阅我即可。

引自：教程 3.5.4 @Output()【前】

public getAllCheckedCourseList() {
    /** 初始化业余列表 */
    const issuePaperCourseList: Array<Course> = new Array<Course>();
    /** 遍历选中的 Map */
    this.issuePaperState.issuePaperCheckedMap.forEach((value, key) => {
      /** 遍历菜单列表 */
      this.issuePaperCourses.forEach(issuePaperCourse => {if (issuePaperCourse.id === key) {issuePaperCourseList.push(issuePaperCourse);
        }
      });
    });
    this.issuePaperCourseSelect.emit(issuePaperCourseList);
  }

emit()办法向组件外弹射数据

/** user -> edit.html **/
(issuePaperCourseSelect)="bindIssuePaperCourse($event)"

/** user -> edit.component.ts **/
  public bindIssuePaperCourse(issuePaperCourseData: Array<Course>) {
    this.userForm.patchValue({issuePaperCourses: issuePaperCourseData});
  }

子组件把解决完的 course 等信息传给父组件，父组件进行表单赋值解决，而后从新渲染 V 层，展现数据。

以下是申请的程序：

总结

在之前看教程的时候感觉云里雾里的，然而当初再看我的项目里用到的中央感觉挺清朗的，清晰了好多，可能之间的过程有点问题，然而总体上的流程感觉还是明确的，实战是最好的老师。

本文作者：河北工业大学梦云智开发团队 张文达