Question

我正在制作一个电影应用程序来练习我的平均堆栈技能，我刚刚添加了一个预告片和我从youtube api获得的数据（videoID和缩略图）。模板显示缩略图，当我单击缩略图时，它会打开一个带有动态嵌入式YouTube预告片的模态。

点击模板中的事件：

(click)="openModal(modal, trailerTitle.id)"

组件中的

功能：

openModal(modal, id){
        this.embedLink = this.sanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/embed/' + id);
        modal.style.display = "block";
    }

我对它的工作原理感到满意，如果浏览器不断反复提出相同的请求，那我就不满意了。这就像它一遍又一遍地翻新页面一样。我注意到它只在我导航到另一个页面或打开后关闭模态后停止。

我不明白为什么会这样做。你们有什么想法吗？

一直反复对服务器发出的请求

GET /app/getCounts 304 1.934 ms - -
entered
part=snippet&q=The%20Shape%20of%20Water%20official&key=AIzaSyD4shfocwn-Ed3Feuoo9fG3d2K2GjHmKeI&maxResults=1&order=relevance&type=video
GET /null 304 4.612 ms - -
GET /cinema/getLatestMovie 304 7.601 ms - -
GET /null 304 1.233 ms - -
GET /stylesheets/style.css 304 1.270 ms - -
GET /js/app/bundle.js 304 1.731 ms - -
GET /movies/getTrailers 304 623.740 ms - -
GET /app/getCounts 304 3.437 ms - -
entered
part=snippet&q=The%20Shape%20of%20Water%20official&key=AIzaSyD4shfocwn-Ed3Feuoo9fG3d2K2GjHmKeI&maxResults=1&order=relevance&type=video
GET /null 304 3.411 ms - -
GET /cinema/getLatestMovie 304 10.370 ms - -
GET /null 304 1.126 ms - -
GET /stylesheets/style.css 304 0.434 ms - -
GET /js/app/bundle.js 304 1.038 ms - -
GET /movies/getTrailers 304 559.484 ms - -
GET /app/getCounts 304 2.537 ms - -
entered
part=snippet&q=The%20Shape%20of%20Water%20official&key=AIzaSyD4shfocwn-Ed3Feuoo9fG3d2K2GjHmKeI&maxResults=1&order=relevance&type=video
GET /null 304 3.593 ms - -
GET /cinema/getLatestMovie 304 10.254 ms - -
GET /null 304 1.080 ms - -
GET /stylesheets/style.css 304 0.491 ms - -
GET /js/app/bundle.js 304 0.900 ms - -
GET /movies/getTrailers 304 573.904 ms - -

我的主组件模板文件：模式位于底部，iframe元素插入动态网址

<div class="col-md-8 col-md-offset-2">
<h5>Welcome to MovieMeter! <span *ngIf="isLoggedIn"> You are logged in as {{fullName}}</span></h5>
    <br>
        <h3>Trailers:</h3>
        <hr>
        <ul>
            <li *ngFor="let trailer of trailers">
                <img src="{{trailer.body.items[0].snippet.thumbnails.high.url}}" alt="nope">
                <div id="{{trailer.body.items[0].id.videoId}}" #trailerTitle (click)="openModal(modal, trailerTitle.id)" class="trailerTitle"><h5>{{trailer.movie.title}}</h5></div>
            </li>
        </ul>
    <app-cinema-featured></app-cinema-featured>
</div>


<!-- The Modal -->
<div #modal id="myModal" class="modal">

    <!-- Modal content -->
    <div #modalContent class="modal-content">
        <span (click)="closeModal(modal)" class="close">&times;</span>
        <iframe width="560" height="315" [src]="embedLink" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </div>

</div>

主页组件

import {Component, OnInit} from "@angular/core";
import {AuthService} from "../auth/auth.service";
import {MovieService} from "../movie/movie.service";
import {DomSanitizer, SafeResourceUrl,} from '@angular/platform-browser';


@Component({
    styleUrls: ['./home.component.css'],
    selector: 'app-home',
    templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {

    isLoggedIn:Boolean;
    fullName;
    trailers;
    embedLink;
    subscription;


    constructor(public sanitizer: DomSanitizer, private authService: AuthService, private movieService: MovieService){}

    ngOnInit(){

        if (localStorage.getItem('token') !== null || undefined){
            this.isLoggedIn = true;
            this.fullName = localStorage.getItem('fullName');
        }
        // get the thumbnails and links of the three most recent movie trailers via the youtube API
        this.subscription = this.movieService.getTrailers()
            .subscribe(trailers => {
                this.trailers = trailers.result;
                console.log(this.trailers);
                this.subscription.unsubscribe();
            })
    }

    // add the 'click outside modal to close the modal functions later."
    openModal(modal, id){
        this.embedLink = this.sanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/embed/' + id);
        modal.style.display = "block";
    }

    closeModal(modal){
        modal.style.display = "none";
    }
}

浏览器在我打开主页

0 个答案: