Как заставить работать рабочий проект JS в Angular? - PullRequest
0 голосов
/ 22 июня 2019

Я создал проект интерактивного видео с 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
|

Идея состоит в том, чтобы воссоздать файлы index.html, interactive.css и interactive.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).Но мой рабочий проект идет дальше: видео автоматически приостанавливается, и на экране появляется модал, чтобы создать интерактивность с пользователями.У меня много ошибок в консоли с Angular, и я думаю, это потому, что моя реализация проекта на Angular плохая.Итак, основные вопросы : куда и как мне скопировать мой код, чтобы воссоздать мой рабочий проект в угловом компоненте?Как я могу импортировать файлы CSS / JS в угловой компонент, чтобы заставить их работать вместе?Спасибо!

1 Ответ

0 голосов
/ 22 июня 2019
  1. Поместите ваши CSS-файлы в папку src, используя default styles.css
  2. в файле Angular.json, импортируйте все файлы css.
"styles": [
  "src/styles.scss",
  "src/customTheme.css",
  "src/videojs.markers.min.css",
  "src/interaction.css"
],
  1. Скопируйте заголовки из вашего index.html и вставьте в index.html угловое приложение (внутри папки Src)
  2. Скопируйте код внутри тега body вашего html, вставьте на home.component.html
  3. Здесь у вас есть 2 варианта, создайте папку «assets» и вставьте сюда или вставьте файлы .js и .png в папку src.
  4. Если вы создаете папку Assets, в angular.json у вас есть массив «assets», поместите вашу новую папку assets.
"assets": [
  "src/favicon.ico",
  "src/assets"
],

Наконец, перенаправьте ссылку на ваши файлы на новое место. VSCode поможет с этим.

...