前言
在之前的学习过程中，对于@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层，展现数据。
以下是申请的程序：
总结
在之前看教程的时候感觉云里雾里的，然而当初再看我的项目里用到的中央感觉挺清朗的，清晰了好多，可能之间的过程有点问题，然而总体上的流程感觉还是明确的，实战是最好的老师。
本文作者：河北工业大学梦云智开发团队 张文达