Передача внешнего атрибута или ввода в пользовательском элементе Angular

Я пытаюсь передать ввод объекта в тег пользовательского элемента angular. Пользовательский элемент состоит из тега videojs. Элемент не читает ввод, который я даю в пользовательском теге элемента.

Этот код — мой компонент видеоплеера, который я хочу преобразовать в настраиваемый элемент.

import { Component, ElementRef, Input, On Destroy, OnInit, ViewChild,AfterViewInit, ViewEncapsulation } from '@angular/core';
import videojs from "video.js"

@Component({
  selector: 'app-video-player',
  templateUrl: './my-video-player.component.html',
  styleUrls: ['./my-video-player.component.scss'],
  encapsulation:ViewEncapsulation.Emulated
})
export class MyVideoPlayerComponent implements OnInit,OnDestroy,AfterViewInit {
  @ViewChild('myVideoPlayer',{static:true})
  myVideoPlayer:ElementRef


  @Input() options:{
    fluid:boolean,
    aspectRatio:string,
    autoplay:boolean,
    controls:boolean,
    // height:number,
    // width:number,
    sources:{
      src:string,
      type:string
    }[],
  }

  player:videojs.Player;

  constructor(
  ) { }

  ngAfterViewInit(){
  }
  
  ngOnInit() {
    this.player = videojs(this.myVideoPlayer.nativeElement, this.options, function onPlayerReady() {
      console.info('onPlayerReady', this);
    });    
  }

  ngOnDestroy() {
    
  }

}

Вот HTML для компонента видеоплеера

<video id = "video-js" preload = "none" class = "video-js vjs-default-skin" controls #myVideoPlayer></video>

Вот код appModule, в котором я преобразовал MyVideoPlayerComponent в пользовательский элемент.

import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, DoBootstrap, Injector, NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MyVideoPlayerComponent } from './my-video-player/my-video-player.component';
import { createCustomElement } from '@angular/elements';

@NgModule({
  declarations: [
    MyVideoPlayerComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [],
  schemas:[CUSTOM_ELEMENTS_SCHEMA],
  bootstrap: [AppComponent],
  entryComponents:[MyVideoPlayerComponent]
})

export class AppModule implements DoBootstrap {
  constructor(private injector:Injector){

    const webComponent=createCustomElement(MyVideoPlayerComponent,{injector:this.injector});
    
    customElements.define('custom-player',webComponent)

  }

  

  ngDoBootstrap(){}
 }

После создания проекта или даже если я непосредственно использую внутри тестовый компонент, который я сделал в том же проекте angular. Он показывает компонент видеоплеера, но не воспроизводит видео, поскольку он не может прочитать источник, даже когда я предоставляю атрибуты.

Код, показанный ниже, показывает, как я пытаюсь ввести данные для пользовательского элемента.

<custom-player options = "{ autoplay: true, controls: true, sources: [{ src: '../../assets/video.mp4', type: 'video/mp4' }]}" ></custom-player>

Будет здорово, если вы изучите эту проблему.

Вот данный снимок экрана пользовательского элемента, который я объявляю.

Красная метка показывает, что он получает src, а выделенный маркер показывает, что он не помещает src в тег видео.

введите здесь описание изображения

🤔 А знаете ли вы, что...
Один из ключевых принципов Angular - это двунаправленное связывание данных, которое автоматически обновляет интерфейс при изменении данных и наоборот.