使用Angular和Core 2.0显示PDF

我试图显示PDF，但实际的PDF应该取决于用户单击的位置。这个例子被缩减到最低限度，所以它不包含任何用户交互，但这正是我想要做的。为了创建这个示例，我使用了VisualStudio创建的默认项目，并更改了以下两个文件

home.component.ts

import { Compinent } from 'angular/core';

@Component({
    selector: 'home',
    templateUrl: './home.component.html'
})
export class HomeComponent {
    pdfurl: string = "http://eloquentjavascript.net/Eloquent_JavaScript.pdf"; /*dummy PDF*/
}

home.component.html

<p>{{ pdfurl }}</p>

<a [attr.href]="pdfurl">PDF</a>

<h5>iframe</h5>
<iframe width="500" height="600" [attr.src]="pdfurl" type="application/pdf"></iframe>

<h5>object</h5>
<object [attr.data]="pdfurl" type="application/pdf"></object>

<h5>embed</h5>
<embed [attr.src]="pdfurl" type="application/pdf">

{{pdfurl}

iframe
对象
嵌入

运行此命令将显示url和链接是否正常工作，但以下显示PDF的尝试均无效。 请向我解释为什么这不起作用，以及应该如何做