Получить исходные размеры видеотега в Angular 2

Question

Я создаю видеокомпонент, и мне нужно получить размеры исходного видео (исходного файла или контейнера), чтобы передать его компоненту-сиблиру. Я использую этот код:

//Video component 
@Component({ 
    moduleId: module.id, 
    selector: 'kt-media', 
    templateUrl: 'kt-media.component.html' 
}) 

export class KT_MediaComponent implements AfterViewInit{ 
    ... 
    private ktIsMedia: boolean; 
    private ktMediaType: string; 
    @ViewChild('ktVideo') ktVideoElement; 

    constructor(private el: ElementRef, private renderer: Renderer) { 
    this.setMediaType(); 
    } 

    ngAfterViewInit(){ 
    this.ktVideoElement = this.getSize(); 
    } 

    setMediaType(){ 
    //This implementation works fine, I hide it for clarity of the problem 
    //Sets this.ktIsMedia to true and this.ktMediaType to 'video' 
    } 
    getSize():ktSize{ 
     let w = this.ktVideoElement.nativeElement.videoWidth; 
     let h = this.ktVideoElement.nativeElement.videoHeight; 
     return {width: w, height: h} 
    }  
} 

Здесь шаблон компоненты:

<div *ngIf="ktIsMedia && ktMediaType === 'video'" > 
    <video 
     #ktVideo> 
     <source 
      [attr.src]="ktMediaSrc |safeUrl" 
      type="video/{{ktVideoType}}"> 
    </video> 
</div> 

видео показано правильно, но исследуя против кода отладчика, это показывает, что ktVideoElement videoWidth и videoHeight является 0. Я попытался реализовать getSize() на разных крючках жизненного цикла: aferviewinit, oninit и т. Д. ... всегда всегда возвращает 0 в качестве размеров видео. Возможно получить размеры исходного файла или после загрузки файла в представление? Если это так, как я могу его реализовать?

Answer 1

По https://stackoverflow.com/a/4129579/217408 это должно работать:

<div *ngIf="ktIsMedia && ktMediaType === 'video'" > 
    <video (loadmetadata)="ktVideoElement = getSize()" 
     #ktVideo> 
     <source 
      [attr.src]="ktMediaSrc |safeUrl" 
      type="video/{{ktVideoType}}"> 
    </video> 
</div> 

Answer 2

на основе respone Гюнтер, в то, что работает, наконец, что:

<div *ngIf="ktIsMedia && ktMediaType === 'video'" > 
    <video 
     #ktVideo 
     (loadedmetadata)="ktSize = getSize()"> 
     <source 
      [attr.src]="ktMediaSrc |safeUrl" 
      type="video/{{ktVideoType}}"> 
    </video> 
</div> 

я изменил 'loadmetadat' на 'loadedmetadata' и положить в на вместо тега источника.