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

我想根据用户单击的按钮在我的页面上播放一些youtube视频。我跨越了安全URL的所有障碍，并在单击按钮时更新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>

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

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);
  }