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層，展現數據。

如下是請求的順序：

總結

在以前看教程的時候感受雲裏霧裏的，可是如今再看項目裏用到的地方感受挺明朗的，清晰了好多，可能之間的過程有點問題，可是整體上的流程感受仍是明白的，實戰是最好的老師。

本文做者：河北工業大學夢雲智開發團隊 張文達