Angular2嵌入对象类型绑定不起作用

Question

我编写了一个angular2组件来显示嵌入的文档，但是当我尝试绑定文档的mimetype时，它无法正常工作。

HTML：

<div class="embed-responsive" *ngIf="mimeType!==null">
        <object [attr.data]="url" 
                [attr.type]="mimeType"
                class="embed-responsive-item">
                <embed [attr.src]="url"
                       [attr.type]="mimeType"/>
        </object>
</div>

使用没有类型绑定的HTML：

<div class="embed-responsive" *ngIf="mimeType!==null">
        <object [attr.data]="url" 
                type="application/pdf" 
                class="embed-responsive-item">
                <embed [attr.src]="url"
                       type="application/pdf"/>
        </object>
</div>

打字稿代码：

import { Component, Input, HostListener } from "@angular/core";
import { AttachmentFile } from "../../model/dockModel";
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

    @Component({
        selector: "document-viewer-inline",
        templateUrl: "docview/components/document-viewer-inline-component/document-viewer-inline-component.html"
    })
    export class DocumentViewerInlineComponent {

        private attachment: AttachmentFile;

        public url: SafeUrl = null;
        public mimeType: string = null;

        constructor(private sanitizer: DomSanitizer) {
        }

        @Input()
        public set attachmentFile(f: AttachmentFile) {
            this.attachment = f;
            if (this.attachment !== null && this.attachment !== undefined) {
                this.url = this.sanitizer.bypassSecurityTrustResourceUrl("/attachment/contentById/" + this.attachment.componentId);            
                this.mimeType = f.mimeType;
            }
        }

        public ngOnInit() {
            this.calculateInlineHeight();        
        }

    }

我的问题是：如何绑定嵌入式和对象的type属性？

Answer 1

我没有找到明确说明的位置，但我非常确定<object>不支持type属性的动态更改，并且需要静态设置。

另见Changing data content on an Object Tag in HTML

以下解决方法不起作用 - 请参阅评论：

黑客可以

    <object *ngIf="mimeType!==null" [attr.data]="url" 
            [attr.type]="mimeType"

 constructor(private cdRef:ChangeDetectorRef) {}

 private _mimeType:string=null;
 public get mimeType():string { return this._mimeType; }
 public set mimeType(value:string) {
   this._mimeType = null;
   this.cdRef.detectChanges();
   this._mimeType = value;
   this.cdRef.detectChanges();
 }

<击> 为了使这更方便使用，您可以使用自定义<my-object>组件包装它。

更新黑客：

public showObject: boolean = true;
public url: String = null;
// public url: SafeUrl = null;

constructor(@Inject(DomSanitizer) private sanitizer: DomSanitizer,
            @Inject(ChangeDetectorRef) private cdRef: ChangeDetectorRef) {
}

@Input()
public set attachmentFile(f: FetAttachmentFile) {
    this.attachment = f;
    if (this.attachment !== null && this.attachment !== undefined) {
        this.url = null;
        this.mimeType = null;
        this.showObject = false;
        this.cdRef.detectChanges();
        this.url = "/attachment/contentById/" + this.attachment.componentId;
        // this.url = this.sanitizer.bypassSecurityTrustResourceUrl("/attachment/contentById/" + this.attachment.componentId);
        this.mimeType = f.mimeType;
        this.showObject = true;
        this.cdRef.detectChanges();
    }
}

public innerHtml() {
    return this.sanitizer.bypassSecurityTrustHtml( 
        "<object data='" + this.url + "' type='" + this.mimeType + "' class='embed-responsive-item'>" +
        "<embed src='" + this.url + "' type='" + this.mimeType + "' />" +
        "</object>");
}

html代码：

<div class="embed-responsive" 
     [style.height]="inlineHeight"
     *ngIf="showObject"
     [innerHTML]="innerHtml()">
</div>