如何使用angular2显示动态url pdf？

Question

Updated code which is working now . 

component.ts file

import {
  Component,
  OnInit,
  Pipe, PipeTransform
} from '@angular/core';
import { ActivatedRoute,Router } from '@angular/router';
import { ObjNgFor } from './retailer_information/objNgFor.pipe';
import { DomSanitizer } from '@angular/platform-browser';
import  {SafePipe} from './retailer_information/url.pipe';

@Component({
  selector: 'retailer_information',
  templateUrl: './retailerinfo.component.html',
})


export class RetailerInfoComponent {
  public  url = '';
  
  constructor(
    public route: ActivatedRoute,
    private router: Router,
    // private sanitizer:DomSanitizer
  ) {
    // this.model.url = this.sanitizer.bypassSecurityTrustHtml(''); 
   }

 ngOnInit() {
      this.url = 'https://blog.mozilla.org/security/files/2015/05/HTTPS-FAQ.pdf';
  }
   
}

<!-- side nav:END -->
<div class="container-fluid">
    <div class="row">
        <div class="yellow-banner">
        </div>
    </div>
</div>
<!-- master-container:START -->
<div class="container master-container container-minh pt-15 pb-15">

    <!-- Form: START-->
    <form (ngSubmit)="formSubmit()" role="form">
        <div class="row form-wrap">

            <div class="col-sm-12">
                <h1>Retailer Information</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 welcome-user-view">
                <div class="media">
                    <div class="media-left">

                        <img src="app/retailer_information/images/retailer-pic.png" class="media-object img-logo-style" width="45">

                    </div>

                </div>
            </div>
        </div>
        <iframe [src]="url | safe" width="500" height="600" type='application/pdf'></iframe>
        <button type="submit" class="btn btn-primary btn-block waves-effect waves-light">
                Proceed
            </button>
        <a href="#" class="center-block"> Cancel </a>
    </form>
    <!-- Form: END -->
</div>

我正在尝试使用 angular2 在 html 页面上显示 pdf。它适用于静态 url pdf 路径，但是当我尝试通过从组件中获取值然后将其绑定到 html 中来动态使用它时，它给了我一个错误？错误是“资源 URL 上下文中使用的不安全值”请帮助。

component.ts file

import {
  Component,
  OnInit,
  Pipe, PipeTransform
} from '@angular/core';
import { ActivatedRoute,Router } from '@angular/router';
import { ObjNgFor } from './retailer_information/objNgFor.pipe';

@Component({
  selector: 'retailer_information'
  styles: [`
  `],
  templateUrl: './retailerinfo.component.html',
})
export class RetailerInfoComponent {
  public model : any = {
    url : 'http://www.attuneww.com/wp-content/uploads/2016/09/GettingStartedWithAngular2.pdf'
  }

  constructor(
    public route: ActivatedRoute,
    private router: Router
  ) {

   }


}

<!-- side nav:END -->
<div class="container-fluid">
    <div class="row">
        <div class="yellow-banner">
        </div>
    </div>
</div>
<!-- master-container:START -->
<div class="container master-container container-minh pt-15 pb-15">

    <!-- Form: START-->
    <form (ngSubmit)="formSubmit()" role="form">
        <div class="row form-wrap">

            <div class="col-sm-12">
                <h1>Retailer Information</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 welcome-user-view">
                <div class="media">
                    <div class="media-left">
                        <img src="app/retailer_information/images/retailer-pic.png" class="media-object img-logo-style" width="45">

                    </div>

                </div>
            </div>
        </div>

        <iframe [src]="url"  name="url" [(ngModel)]="model.url" #url="ngModel"
         width="100%" height="500" ngDefaultControl>
</iframe>

        <button type="submit" class="btn btn-primary btn-block waves-effect waves-light">
                Proceed
            </button>
        <a href="#" class="center-block"> Cancel </a>
    </form>
    <!-- Form: END -->
</div>

Answer 1

得到它的工作。 您必须按照以下步骤操作。

1. 创建一个名为 pipe.url.ts 的文件并将以下代码粘贴到其中

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

1. 然后将此文件导入到您的 component.ts 文件中。
2. 同样在你的 module.ts 文件中导入相同的文件，并在 ngModule 部分声明 SafePipe。
3. 你可以看看我上面更新的代码。

Answer 2

iframe不是输入控件，所以不能使用ngModel。

What is ngModel: 这是一个指令

从域模型创建一个FormControl 实例并将其绑定到一个 表单控制元素。

从域模型创建一个FormControl 实例并将其绑定到一个 表单控制元素。

FormControl 实例将跟踪价值、用户交互和 控件的验证状态并保持视图与 模型。如果在父表单中使用，该指令也将注册 本身与窗体作为子控件。