这个适合我。

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);      
    }
}

这个适合我。

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);      
    }
}

这对我很有用

我在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');
  }

}

我也遇到过这个问题，但为了在我的angular模块中使用安全管道，我安装了安全管道npm包，你可以在这里找到。仅供参考，这在Angular 9.1.3中是有效的，我还没有在其他版本的Angular中尝试过。下面是如何一步一步地添加它:

Install the package via npm install safe-pipe or yarn add safe-pipe. This will store a reference to it in your dependencies in the package.json file, which you should already have from starting a new Angular project. Add SafePipeModule module to NgModule.imports in your Angular module file like so: import { SafePipeModule } from 'safe-pipe'; @NgModule({ imports: [ SafePipeModule ] }) export class AppModule { } Add the safe pipe to an element in the template for the Angular component you are importing into your NgModule this way:

<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>

说实话，所有的答案似乎都是错的。使用this. saniizer . bypasssecuritytrustresourceurl (url)仅绕过安全性，并将url视为SafeResourceUrl。但是，给定的url仍然可能是恶意的，导致安全违规。医生也这么说:https://angular.io/api/platform-browser/DomSanitizer#bypassSecurityTrustResourceUrl

一个解决方案是首先调用sanitizer，然后将sanitizer的返回值传递给bypassSecurityTrustResourceUrl，如下所示:

this.sanitizer.bypassSecurityTrustResourceUrl (this.sanitizer.sanitize (SecurityContext。URL、URL))

通过这种方式，您可以清除任何恶意代码，然后绕过表示这确实是一个安全url的安全性。

constructor(
 public sanitizer: DomSanitizer, ) {

 }

我已经挣扎了4个小时。问题出在img标签。当你使用方括号的'src' ex: [src]。你不能使用这个角表达式{{}}。你只要直接从下面的实物例子给出。如果你给出角表达式{{}}。你会得到插值误差。

首先，我用ngFor来迭代国家 *ngFor="让国家中的国家" 然后你把这个放到img标签里。就是它了。 < img (src) = " sanitizer.bypassSecurityTrustResourceUrl (country.flag)” Height ="20" width="20" alt=""/> .