在Angular 4中更改iframe src而不重新加载页面

Question

我想根据用户点击的按钮在我的页面上播放一些YouTube视频。我越过安全网址的所有障碍并按下按钮点击更新src但是当我更改源代码时，我看到页面重新加载，我感觉有一个很大的缺点，因为在页面重新加载我的服务中的所有数据都将丢失。

有人可以建议如何在没有页面重新加载的情况下执行此操作吗？

以下是我的代码：

模板

<iframe width="600" height="400" [src]="VideoURL" frameborder="0"></iframe>
    <ul>
        <li *ngFor="let course of courses">
            <button (click)="changeVideo(course.url)">{{course.name}}</button>
        </li>
    </ul>

组件

export class CoursesComponent implements OnInit  {
  constructor(public router: Router,private sanitizer: DomSanitizer,private _coursesService: CoursesService) { }

  courses=this._coursesService.getCourses();
  ngOnInit() {
  }
    trustSrcUrl = function(data){
    return this.sanitizer.bypassSecurityTrustResourceUrl(data);
  }
  VideoURL=this.trustSrcUrl(this.courses[0].url);
  changeVideo=function(url){
      this.VideoURL=this.trustSrcUrl(url);
  }

我在网上看到的每个例子，无论是角度还是普通的javascript都有页面重新加载的缺点。