在特定组件/路径上添加视频背景

Question

我正在尝试设置一个全屏视频背景，我只希望在应用＆＃34;主页＆＃34;但还没有成功。在应用程序上呈现的第一个组件是HomeComponent。

app-routing-module.ts（仅显示路径）

const routes: Routes = [
{ path: '', redirectTo: '/accueil', pathMatch: 'full'},
{ path: 'accueil', component: HomeComponent },
{ path: 'ligne/:lineId', component: LineComponent },
{ path: 'ligne/:lineId/station/:stationName', component: StationComponent }
];

我想要做的是仅在我/在/ accueil上而不在其他路径/组件上时才有视频背景。有没有办法做到这一点？

提前致谢。

Answer 1

您可以将路由器添加到包含要为视频设置背景的div的组件

然后做这样的事情：

if(this.router.url===routeIWant){
    this.custom-bg=true
}else{
    this.custom-bg=false
 }

在html上，下面的div是你要设置bg的那个

<div [ngClass]="{'customBgClass': custom-bg}">

在css上

.customBgClass{
 background: url(your-video-url)
}