Javascript 将新创建的元素添加到角度模板元素

因此，我想在我的角度模板中已经存在的元素中添加一个新的视频元素。我尝试的是使用@ViewChild获取模板的元素，并使用.appendChild（）添加我创建的其他元素。不幸的是，Viewchild给了我一个elementRef，因此我不能简单地使用.appendChild（）。有人知道另一种选择吗

**这里是组件：我抓取了viewZone元素，并希望我可以简单地执行类似.appendChild（）的操作，但出乎意料的是，它是一个elementRef，所以我现在不知道该怎么做**

import {Component, OnInit, ViewChild} from "@angular/core";
import {ActivatedRoute} from "@angular/router";
import {MovieService} from "../movie/movie.service";

@Component({
    selector: 'app-trailers',
    templateUrl: './trailers.component.html',
    styleUrls: ['./trailers.component.css']
})

export class TrailersComponent implements OnInit{

    trailerIdArray;
    @ViewChild('trailerZone') trailerZone;

    constructor(private route: ActivatedRoute){

    }

    ngOnInit(){
        this.route.queryParams.subscribe( params => {
            let id = params.id;
            this.createDynamicEmbeddedYoutubeTrailer(id);
        });
    }

    createDynamicEmbeddedYoutubeTrailer(id){
        let trailerElem = document.createElement("iframe");
        trailerElem.setAttribute("width", "560");
        trailerElem.setAttribute("height", "315");
        trailerElem.setAttribute("src", "https://www.youtube.com/embed/" + id);
        trailerElem.setAttribute("frameBorder", "0");
        trailerElem.setAttribute("allow", "autoplay: encrypted-media");
        trailerElem.setAttribute("allowfullscreen", "");

        console.log(this.trailerZone);
        console.log(trailerElem);
    }
}

模板

<div class="col col-md-8 col-md-offset-2">
        <div #trailerZone class="trailerZone">
            <button class="btn btn-primary previousButton">Previous</button>
            <button class=" btn btn-primary nextButton">Next</button>
        </div>
</div>

以前的
下一个

两个元素的两个console.log

<iframe width="560" height="315" src="https://www.youtube.com/embed/XFYWazblaUA" frameborder="0" allow="autoplay: encrypted-media" allowfullscreen=""></iframe>



ElementRef {nativeElement: div.trailerZone}

ElementRef{nativeElement:div.trailerZone}

您可以使用

this.trailerZone.nativeElement

获取本机元素，并且可以对其使用DOM操作，例如

appendChild

您可以使用

this.trailerZone.nativeElement

获取本机元素，并且可以对其使用DOM操作，例如

appendChild

这里有一个角度更高的方法：

创建一组youtube视频ID，如：

videoIds: string[] = [
  'KhzGSHNhnbI',
  'hAaoPOx_oIw',
  'WjcL09xgo3o'
];

// add video function
createDynamicEmbeddedYoutubeTrailer(id) {
  this.videoIds.push(id);
}

HTML:

---

带有输入文本字段和“添加视频”按钮的STACKBLITZ:

这里有一个角度更高的方法：

创建一组youtube视频ID，如：

videoIds: string[] = [
  'KhzGSHNhnbI',
  'hAaoPOx_oIw',
  'WjcL09xgo3o'
];

// add video function
createDynamicEmbeddedYoutubeTrailer(id) {
  this.videoIds.push(id);
}

HTML:

---

带有输入文本字段和“添加视频”按钮的STACKBLITZ:

非常有趣！但是，如何在模板中显示其中一个呢？我仍然会遇到以下错误：解析头X-XSS-Protection时出错：1；模式=块；report=：字符位置22处安全页面的不安全报告URL。默认保护将被应用。我更新了stackblitz，只显示一部没有

ngFor

的电影，导航是通过按钮完成的。关于这个错误，它看起来像是Chrom bug，请参阅了解更多详细信息非常有趣！但是，如何在模板中显示其中一个呢？我仍然会遇到以下错误：解析头X-XSS-Protection时出错：1；模式=块；report=：字符位置22处安全页面的不安全报告URL。默认保护将被应用。我更新了stackblitz，只显示一部没有

ngFor

的电影，导航是通过按钮完成的。关于这个错误，看起来像是Chrom bug，请参阅以了解更多详细信息

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}