Question

我使用HTML + CSS + JS和YouTube API创建了一个交互式视频项目。我想在Angular组件中实现它，但无法成功。

我的工作项目 这是项目的树：

/Project
|
+-- index.html
|    
+-- /css
|  |  
|  +-- customTheme.css
|  +-- videojs.markers.min.css
|  +-- interaction.css
|    
+-- /js
|  |  
|  +-- videojs-markers.min.js
|  +-- interaction.js
|
+-- /media
|  |  
|  +-- some medias .png
|

这个想法是在Angular组件中重新创建index.html，interaction.css和interact.js文件，然后导入其他文件。

我的Angular组件 它由3个文件组成：component.html，component.css和component.ts。 component.ts文件是：

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() {
  }

  ngOnInit() {
  }
}

我花了几个小时尝试重新创建这个项目。我成功地使用YouTube API显示了YouTube视频，并在屏幕上显示了一些内容（纯CSS）。但是我的正在工作的项目走得更远：视频自动暂停，并且Modals出现在屏幕上以与用户建立互动。我在使用Angular的控制台中有很多错误，我认为这是因为我在Angular中实施该项目很糟糕。因此，主要问题是：我应该在哪里以及如何复制代码以在Angular Component中重新创建工作项目？如何在Angular组件中导入css / js文件以使其协同工作？谢谢！

Answer 1

使用默认styles.css将css文件放入src文件夹中
在Angular.json文件上，导入所有CSS文件。

"styles": [
  "src/styles.scss",
  "src/customTheme.css",
  "src/videojs.markers.min.css",
  "src/interaction.css"
],

从index.html复制标头，然后粘贴到角度应用程序的index.html（在Src文件夹中）
将代码复制到html的body标记内，粘贴到home.component.html
这里有2个选项，创建一个文件夹“ assets”并粘贴到此处，或将.js文件和.png文件粘贴到src文件夹中。
如果您在angular.json上创建Assets文件夹，则有一个“资产”数组，请放置新的Assets文件夹。

"assets": [
  "src/favicon.ico",
  "src/assets"
],

最后，将文件链接重定向到新位置。 VSCode将对此提供帮助。

如何使工作的JS项目在Angular中工作？

1 个答案: