Angular 角度6：将子对象中的单击事件发送到父对象

编辑： 它仍然不工作，不会抛出任何错误。 我编辑了代码并添加了来自parent.component.ts的部分代码

我有一个侧导航栏的父组件和子组件，它们嵌套在父组件的主体中并包含iframe。 我希望当iframe上有一个click事件时，我会返回到发生该事件的父级，这样我就可以将此视频标记为在父级侧栏中观看的视频，并使用“V”

父组件。ts

/。。。。。
导出类CoursePlayComponent实现OnInit{
课程：ICourse；
courseId：数字；
//当前用户
公共用户：IUser；
//当前课程的变量
公共电流：IVideo；
建造商（私人courseService:courseService，
专用路由：激活的路由，
专用路由器：路由器，
专用用户服务：用户服务）{
this.currentUser=JSON.parse（localStorage.getItem（'currentUser'）；
}
恩戈尼尼特（）{
//从课程详细信息保存此课程id，并从服务获取http请求
this.courseId=JSON.parse（localStorage.getItem（“courseId”）；
this.getCourse（this.courseId）；
}
//通过服务id获取课程
getCourse（id:number）{…}
//按单元和课程中的课程位置获取当前课程
getCurrent（单元位置：数字，单元位置：数字）{…}
//检查课程是否已观看
不包括ISLESSONINCLUDE（课程编号：编号，课程编号：编号）{
返回此.userService.isLessonIncluded（课程id、课程id）；
}
//检查子课程的值，并将新课程添加到已完成的课程数组中
监视（状态）{
日志（“观看的父视频：”，状态）；
//更新用户数据数组
this.userService.addToCompletedLessons（this.course.id，this.current.id）；
}   
}

您可以利用

@Output

&

@EventEmitter

通过子组件通知父组件

子组件ts

---

如何在子组件中使用输出？我试着使用我在stuckoverflow上看到的一些例子，但没有一个像你使用输入一样有效，谷歌搜索

angular@output（）

应该足够了

@output（）clicked=neweventemitter（）

addLesson（）：void{this.clicked.next（）；}

它会立即更新到父级吗？我在ngIf中写什么来显示“V”？谢谢！我还想在侧边栏中添加ngIf，如果paused为true，它将显示（或不显示）v字体。为此，我需要在这个标记中写入*ngIf=“onPauseClick（）”？如果在父组件中有侧栏，则可以添加put

*ngIf=“！pauseState”

。我也更新了答案。只要检查一下它是否符合你的要求。它对我不起作用。我编辑了代码，以便您可以看到我更改的内容。也没有任何错误。请将

控制台.log

放入

onPausedClick

和

pauseClick

函数中，检查它是否正在调用这些函数。我更新了代码，添加到子控制台和父控制台.log（不同的）中，但控制台中没有打印任何内容。就像点击事件不起作用一样。Iframe是否有不同的单击事件（单击）？

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { ActivatedRoute, Router, Routes, NavigationEnd } from '@angular/router';
import { DomSanitizer } from '@angular/platform-browser';

import { CourseService } from '../../course.service';

@Component({
  selector: 'course-lesson',
  templateUrl: './course-lesson.component.html',
  styleUrls: ['./course-lesson.component.sass']
})
export class CourseLessonComponent implements OnInit {

  @Input() lessonId: number;
  @Input() lessonName: string;
  @Input() lessonData: string;
  @Input() totalLesoons: number;
  @Output() paused = new EventEmitter<string>();

  pauseClick(){
    this.paused.emit(true);
  }

  constructor(private courseService: CourseService,
      private route: ActivatedRoute,
      private router: Router) { }

  ngOnInit() { }

}

<iframe (click)="pauseClick()" frameborder="0" allowfullscreen="true" [src]='lessonData | safe'></iframe>

<course-lesson (paused)="onPausedClick($event)" *ngIf="showLesson == true" [lessonId]="current?.id" [lessonName]="current?.name" [lessonData]="current?.data" [totalLesoons]="totalLesoons"></course-lesson>

public pauseState = false;
onPausedClick(state){
   console.log("Paused is clicked ", state);
   this.pauseState = state;
}