Question

我是没有AngularJS经验的Angular 2的新手，并且参与了一个涉及设置iframe src属性的教程：

int transactionIndex = source.IndexOf("Transaction ID");
int pnrIndex = source.IndexOf("PNR No.");

这会引发异常：

string transactionId;

string source = @"Transaction ID : 100000527054518 PNR No. : 6755980353 Train No. / Name : 18615 / KRIYA YOGA EXP Date of Booking : 07-Jun-2016 Class : SLEEPER CLASS Quota : GENERAL Date of Journey : 13-Jun-2016 From : HWH To : RNC Boarding At : HWH Date Of Boarding : 13-Jun-2016 Reservation Up to : RNC Distance : 416 KM Scheduled Departure : 22:10 Scheduled Arrival : 14-Jun-2016 ( 07:05 Hrs ) Total Fare : ? 500.0 & SC : ? 23.0 Adult : 2 & Child : 0 Details of Passengers S.No.Name
                        Age Gender Concession Status Coach Seat / Berth / WL No Current Status Coach Seat / Berth / WL No ID Type / ID No. 1 AYAN PAL 40 Male CNF S7 49(LB) CNF S7 49(LB)";

Regex transactionRegex = new Regex(@"Transaction ID : [0-9]+ PNR No.");
Match match = transactionRegex.Match(source);

if (match.Success)
{
   transactionId = match.Value.Replace("Transaction ID :", "").Replace("PNR No.", "");
}

我已经尝试使用<iframe width="100%" height="300" src="{{video.url}}"></iframe>绑定但没有成功。我可能错过了一些东西，我很难找到解决方案。

Answer 1

更新

对于 RC.6 ^ 版本，请使用 DomSanitizer

<强> Plunker

一个很好的选择是使用纯管道：

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer} from '@angular/platform-browser';

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

请记住将新的SafePipe添加到AppModule的declarations数组中。（as seen on documentation）

@NgModule({
   declarations : [
     ...
     SafePipe
   ],
})

HTML

<iframe width="100%" height="300" [src]="url | safe"></iframe>

<强> Plunker

如果您使用embed标记，这可能会让您感兴趣：

how with angular2 rc.6 disable sanitize on embed html tag which display pdf

旧版本RC.5

您可以像这样利用DomSanitizationService：

export class YourComponent {
  url: SafeResourceUrl;
  constructor(sanitizer: DomSanitizationService) {
    this.url = sanitizer.bypassSecurityTrustResourceUrl('your url');
  }
}

然后绑定到模板中的url：

<iframe width="100%" height="300" [src]="url"></iframe>

不要忘记添加以下导入：

import { SafeResourceUrl, DomSanitizationService } from '@angular/platform-browser';

<强> Plunker sample

Answer 2

这个适合我。

import { Component,Input,OnInit} from '@angular/core';
import {DomSanitizer,SafeResourceUrl,} from '@angular/platform-browser';

@Component({
    moduleId: module.id,
    selector: 'player',
    templateUrl: './player.component.html',
    styleUrls:['./player.component.scss'],

})
export class PlayerComponent implements OnInit{
    @Input()
    id:string; 
    url: SafeResourceUrl;
    constructor (public sanitizer:DomSanitizer) {
    }
    ngOnInit() {
        this.url = this.sanitizer.bypassSecurityTrustResourceUrl(this.id);      
    }
}

Answer 3

这适用于Angular 5.2.0

<强> sarasa.Component.ts

import { Component, OnInit, Input } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-sarasa',
  templateUrl: './sarasa.component.html',
  styleUrls: ['./sarasa.component.scss']
})

export class Sarasa implements OnInit {
  @Input()
  url: string = "https://www.mmlpqtpkasjdashdjahd.com";
  urlSafe: SafeResourceUrl;

  constructor(public sanitizer: DomSanitizer) { }

  ngOnInit() {
    this.urlSafe= this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
  }

}

<强> sarasa.Component.html

<iframe width="100%" height="100%" frameBorder="0" [src]="urlSafe"></iframe>

那就是所有人!!!

Answer 4

constructor(
 public sanitizer: DomSanitizer, ) {

 }

我已经挣扎了4个小时。问题出在img标签中。当使用方括号来表示“ src”时，例如：[src]。您不能使用此角度表达式{{}}。您只需直接从下面的对象示例中给出即可。如果您给出角度表达式{{}}。您会得到插值错误。

首先，我使用ngFor来迭代国家/地区
```
*ngFor="let country of countries"
```

秒，您将其放入img标签。就是这个。

<img [src]="sanitizer.bypassSecurityTrustResourceUrl(country.flag)"
height="20" width="20" alt=""/>

Answer 5

我也遇到了这个问题，但是为了在我的角度模块中使用安全管道，我安装了安全管道npm软件包，您可以找到here。仅供参考，这在Angular 9.1.3中有效，我没有在任何其他Angular版本中尝试过。逐步添加的方法如下：

通过npm install safe-pipe或yarn add safe-pipe安装软件包。这会将引用存储在package.json文件的依赖项中，从开始新的Angular项目开始，应该已经具有该引用。

将SafePipeModule模块添加到Angular模块文件中的NgModule.imports中，如下所示：

import { SafePipeModule } from 'safe-pipe';

@NgModule({
    imports: [ SafePipeModule ]
})
export class AppModule { }

通过以下方式将安全管道添加到要导入到NgModule中的Angular组件的模板中的元素中：

<element [property]="value | safe: sanitizationType"></element>

以下是html元素中的safePipe的一些特定示例：

<div [style.background-image]="'url(' + pictureUrl + ')' | safe: 'style'" class="pic bg-pic"></div>
<img [src]="pictureUrl | safe: 'url'" class="pic" alt="Logo">
<iframe [src]="catVideoEmbed | safe: 'resourceUrl'" width="640" height="390"></iframe>
<pre [innerHTML]="htmlContent | safe: 'html'"></pre>

Answer 6

这对我有用

我在 iframe 中定义了一个 id

<iframe id="embeddedPage"></iframe>

在组件中我使用了这段代码

export class YourComponent implements OnInit {
    
  constructor() {}

  ngOnInit(): void {
    const iframe =  document.getElementById('embeddedPage') as HTMLIFrameElement;
    iframe.contentWindow.location.replace('your url');
  }

}

Answer 7

我通常如下添加单独的安全管道可重用组件

# Add Safe Pipe

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({name: 'mySafe'})
export class SafePipe implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) {
    }

    public transform(url) {
        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }
}

# then create shared pipe module as following 

import { NgModule } from '@angular/core'; 
import { SafePipe } from './safe.pipe';
@NgModule({
    declarations: [
        SafePipe
    ],
    exports: [
        SafePipe
    ]
})
export class SharedPipesModule {
}

# import shared pipe module in your native module

@NgModule({
    declarations: [],
    imports: [
        SharedPipesModule,
    ],
})
export class SupportModule {
}

<!-------------------
call your url (`trustedUrl` for me) and add `mySafe` as defined in Safe Pipe
---------------->
<div class="container-fluid" *ngIf="trustedUrl">
    <iframe [src]="trustedUrl | mySafe" align="middle" width="100%" height="800" frameborder="0"></iframe>
</div>

Answer 8

祝贺你！ ¨^^ 我有一个简单的＆amp;为您提供高效的解决方案，是的！

<iframe width="100%" height="300" [attr.src]="video.url"></iframe

[attr.src]而不是src “video.url”而非{{video.url}}

很棒;）

如何在Angular 2中设置iframe src而不会导致`unsafe value`异常？

8 个答案: