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层，展示数据。

以下是请求的顺序：

总结

在之前看教程的时候感觉云里雾里的，但是现在再看项目里用到的地方感觉挺明朗的，清晰了好多，可能之间的过程有点问题，但是总体上的流程感觉还是明白的，实战是最好的老师。

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