typescript - Hvordan få tilgang til et HTML-videoelement i Angular2

Jeg har et HTML5 <video>-element i en Angular2-komponent. Jeg trenger tilgang til det for å sjekke varigheten før jeg tillater brukeren å dele det på Twitter.

Finnes det noen måte gjennom modellbinding, eller direkte tilgang til DOM-en, at jeg kan få denne informasjonen i komponentens underliggende klasse?

Jeg har prøvd å binde det ved å bruke ng-model, slik i komponentens mal:

<video controls width="250" [(ng-model)]="videoElement">
    <source [src]="video" type="video/mp4" />
</video>

og i komponentens klasse (TypeScript):

videoElement: HTMLVideoElement;

Det gir meg denne feilen: EXCEPTION: Ingen verdi-tilgang for '' i [null]

Jeg klarte å få tilgang til det bare ved å gi videoelementet en id og bruke document.getElementById("videoElementId"), men det virker som det må finnes en bedre måte.

Svar #1

Du kan injisere ElementRef og deretter få tilgang til elementet som

element.nativeElement.shadowRoot.querySelector('video').duration;
// with encapsulation: ViewEncapsulation.Native

og med andre visningsinnkapslingsmoduser sannsynligvis

element.nativeElement.querySelector('video').duration;

(har ikke prøvd selv ennå though).

Dette bør fungere også

<video (durationchange)="durationChangeEventHandler($event)"></video>

og deretter få tilgang til det ved å bruke $event.target

Bruke en direktiv (eksempel i Dart-kode)

@Directive(selector: 'video')
class VideoModel {
  ElementRef _element;
  VideoModel(this._element) {
    VideoElement video = _element.nativeElement as VideoElement;
    video.onDurationChange.listen((e) => duration = video.duration);
  }

  num duration;
}

I komponenten din legg til

@Component(
    selector: 'my-component',
    viewProviders: const [VideoModel], 
    directives: const [VideoModel],
    templateUrl: 'my_component.html') 
class MyComponent {
    @ViewChild(VideoModel) 
    VideoModel video;
}

nå kan du få tilgang til varigheten med video.duration

Relaterte artikler