Question

所以我想在Angular模板中为已经存在的元素添加一个新的视频元素。我尝试的是使用@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.logs

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



ElementRef {nativeElement: div.trailerZone}

Answer 1

您可以使用this.trailerZone.nativeElement来获取本机元素，并且可以对其使用DOM操作，例如appendChild。

Answer 2

这是一种更有棱角的方式：

创建一组YouTube视频ID，例如：

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

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

HTML：

<iframe width="100%" 
        height="131"  
        *ngFor="let id of videoIds"
        [src]="('https://www.youtube.com/embed/' + id) | safe"
        frameborder="0" 
        allow="autoplay: encrypted-media" 
        allowfullscreen=""></iframe>

这里的

safe管道告诉角度，给定src值是安全的。也添加此管道（从similar answer复制）：

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

带有输入文字字段的STACKBLITZ和“添加视频”按钮：https://stackblitz.com/edit/angular-dacotr?file=app%2Fapp.component.ts

将新创建的元素添加到Angular模板元素

2 个答案: