css - Angular Youtube 播放器 - 适合 100% 高度

Question

我在 Angular 11 项目中使用Youtube Angular pakacge。我想将播放器填充到 div 高度的 100%，这是一个TailWind h-full div：

<div class="flex flex-col flex-auto w-full h-full xs:p-2" #videoContainer>
    <youtube-player
            *ngIf="videoId"
            [videoId]="videoId"
            width="100%"
            [height]="videoHeight"
    ></youtube-player>
</div>

我已经尝试过两种不同的方式来做到这一点：

#1height="100%"或height="100vh"

两者都导致：

#2 动态高度

[height]="videoHeight"

ngOnInit() {

    this._params = this._route.params.subscribe((params) => {
        this.videoId = params['videoId'];
    });

}

ngAfterViewInit(): void {
    this.videoHeight = this.videoContainer.nativeElement.offsetHeight;
}

这有效，但会导致

错误：NG0100：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。以前的值：'未定义'。当前值：'905'..

#3 移动videoHeight

我移至this.videoHeight = this.videoContainer.nativeElement.offsetHeight;构造函数并在OnInit这导致：

TypeError：无法在新的 YoutubeComponent 上读取未定义的属性“nativeElement”

我究竟做错了什么？

Answer 1

1. 尝试height="100vh"
2. 尝试videoHeight在声明期间constructor 或在ngOnInit钩子中或钩子中分配值。

Answer 2

删除任何尝试在模板代码中设置width和-height

<div class="flex flex-col flex-auto w-full h-full xs:p-2">
    <youtube-player *ngIf="videoId" [videoId]="videoId"></youtube-player>
</div>

并且还来自组件代码。然后它应该自动显示到全高。