Question

我无法通过插值理解属性绑定。

以下代码是为iframe分配src的正确方法。

<iframe [src]='sanitizer.bypassSecurityTrustResourceUrl(video.url)' frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

但是我想直接用id连接url。我设法编写下面的代码，但我确信这是错误的。

<iframe [src]="sanitizer.bypassSecurityTrustResourceUrl("' + https://www.youtube.com/watch?v=' + '"video.id)" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

关于如何在绑定和插值期间连接字符串的任何一个指南都可以吗？此外，我们将非常感谢您对任何指南的一些解释或链接。

Answer 1

<强>第一

我相信你刚刚添加了多于必要的引号。我认为这应该会更好：

<iframe [src]="sanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/watch?v=' + video.id)"></iframe>

<强>第二

我不建议直接内联清理输入。我建议你使用组件内部逻辑来清理你的不安全数据。在你的组件的一些内部功能中完全构建url，很可能你根本就不需要清洁剂。

Answer 2

请查看以下工作代码并查看plunkr。

https://plnkr.co/edit/tYq22VjwB10WmytQO9Pb?p=preview

的index.html

    <!DOCTYPE html>
    <html ng-app="plunker">
    <head>
        <meta charset="utf-8" />
        <title>AngularJS Plunker</title>
        <link rel="stylesheet" href="style.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-sanitize.min.js"></script>
        <script src="app.js"></script>
    </head>
    <body>
        <div ng-controller="MainCtrl">
            <p>{{movie.src}}</p>
            <iframe ng-src="{{trustSrc(movie.src)}}"></iframe>
        </div>
    </body>
    </html>

app.js

var app = angular.module('plunker', ['ngSanitize']);

app.controller('MainCtrl', function($scope, $sce) {
  $scope.trustSrc = function(src) {
    return $sce.trustAsResourceUrl(src);
  }

  $scope.movie = {src:"https://www.youtube.com/embed/Lx7ycjC8qjE", title:"Egghead.io AngularJS Binding"};
});

角度属性绑定或插值

2 个答案: