在 Angular 中实现延迟加载后，背景视频未加载

Question

所以，这几天我一直在练习Angular，在实现延迟加载时遇到了这个问题。我的视频无法加载；如果是，则不是静音，刷新网页后也不会再次加载。

这就是 HTML 中的设置方式：

<video class="background-video" autoplay loop muted>
  <source src="assets/main-page-pc.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>  

现在，当我创建项目时，我没有使用

ng new web-name --no-standalone

，所以我必须手动创建

app-routing.module.ts

。我有一个主页组件，其中包含

home.module.ts

文件，当然还有网站的内容。我不使用默认的

app.component

来做任何事情。

我的

app-routing.module.ts

看起来像这样：

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./home/home.module').then(m => m.HomeModule) // Lazy loading the home module
  }
];


@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

和

home.module.ts

像这样：

@NgModule({
  declarations: [HomeComponent],
  imports: [
    CommonModule,
    RouterModule.forChild([{ path: '', component: HomeComponent }])
  ]
})

我真的不知道发生了什么。视频位于正确的位置，并且在添加延迟加载之前加载得很好。另外，实施后，每次我使用

ng serve

时，我都会收到以下消息：

“监视模式已启用。正在监视文件更改... 注意：原始文件大小并不反映开发服务器每个请求的转换。”

Answer 1

回答：据我所知，当您实现延迟加载或路由时，似乎会导致组件渲染出现轻微延迟。所以，这个问题确实没有解决办法。

确保您在

<router-outlet>

中使用

app.component.html

并且所有路由均已正确设置。然后，使用

<button>

或

<a>

创建一个小菜单，将您带到组件 A 和 B。加载网页时，您将看到视频将成功加载。

例如，如果视频位于组件 A 中，则将 A 设置为“默认”页面将加载视频，如果您从组件 B 转到组件 A，也会执行相同的操作。

至于我声明视频未静音的部分，我没有使用

muted

标签，而是使用了

[muted] = "'muted'"

。它的表现就像冠军一样！ （当然，请确保您的视频存在并且您使用的位置正确）

这是我第一次使用 Angular 进行开发，所以请不要评判解释，哈哈！