gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 02:19:30 25 4
gpt4 key购买 nike

所以我想将一个新的视频元素添加到我的 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.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}

最佳答案

这是一种更 Angular 方法:

创建 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 管道告诉 Angular 给定的 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

关于javascript - 将新创建的元素添加到 Angular 模板元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49309007/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com