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

    }

我的问题是：如何绑定embedded和object的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>

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

Angular2 embedded object type binding not works

html

typescript

angular2-components

angular