在 Angular 8 中绑定 youtube 链接？

Question

我的视频有问题，链接在数组中并且绑定不起作用

<div class="card mb-4" *ngFor="let clip of clips">
              <div class="embed-responsive embed-responsive-16by9">
                  <iframe class="embed-responsive-item" [src]="clip.src"></iframe>
                </div>
              <div class="card-body">
              <h2 class="card-title">{{clip.src}}</h2>
              <p class="card-text">{{clip.description}}</p>
            </div>

如果我像“http://”这样绑定链接就可以了。如果像[src]="clip.src" or src="{{clip.src}}" 这样的绑定不起作用。我如何使用 src 从对象到绑定？

Answer 1

你所拥有的看起来应该可以工作。您可能需要创建一个 safeUrl 管道来绕过 DOM Sanitizer。

这是一篇很好的文章。

https://medium.com/@swarnakishore/angular-safe-pipe-implementation-to-bypass-domsanitizer-stripping-out-content-c1bf0f1cc36b

简而言之，Angular 正试图保护您的用户免受 XSS 攻击。你知道这个链接是安全的，但 Angular 并不安全，因此它会将其从标记中剥离以保护用户。绕过 DOM Sanitizer 会阻止 Angular 这样做。