如何使用angular2显示动态网址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

iframe不是输入控件，因此您无法使用ngModel。

  

What is ngModel：它是

的指令      

从域模型创建FormControl实例并将其绑定到   形式控制元素。

     

从域模型创建FormControl实例并将其绑定到   形式控制元素。

     

FormControl实例将跟踪值，用户互动和   控件的验证状态并保持视图与...同步   模型。如果在父表单中使用，该指令也将注册   本身就是儿童控制的形式。

Answer 2

搞定了。 你必须按照这个步骤。

1. 创建一个名为say 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. 您可以查看我上面的更新代码。