html - קשר סוג אובייקט מוטמע ב-Angular2 לא עובד

כתבתי קומפוננטה של Angular2 להצגת מסמכים מוטמעים, אבל כאשר אני מנסה לקשר את סוג המדיה של המסמך זה לא עובד.

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>

קוד TypeScript:

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 של embedded ו-object?

תשובה #1

לא מצאתי איפה זה מצוין במפורש אבל אני די בטוח ש-<object> לא תומך בשינויים דינמיים במאפיין type ודרוש שהוא יוגדר בצורה סטטית.

ראו גם שינוי תוכן הנתונים על תג אובייקט ב-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>