如何使用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. 创建一个名为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);
  }
} 

2. 之后，在您的component.ts文件中导入此文件。
3. 也会在模块文件中导入相同的文件，并在ngmodule部分中声明SafePipe。
4. 您可以查看上面的我更新的代码。

Answer 2

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

什么是 ngModel：这是一个指令

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

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

FormControl实例将跟踪值，用户交互和 控制状态的验证状态，并使视图与 模型。如果在父母表格中使用，则指令还将注册 本身作为子女控制的形式。