Angular 我已经用html、css和js编写了卡片滑块的代码。我需要在角度分量中使用它。但是我'；我一直在添加js文件

这是我的html代码。我已经在app.component.html中添加了这个

<div class="container">
  <div class="card"></div>
  <div class="card active"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

我已经在assets\js\custom.js中添加了它 如何在组件中添加js代码以使滑块工作

import { Component, OnInit } from '@angular/core';
declare const scrollLeft: any;
declare const reset: any;
@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.scss']
})
export class SampleComponent implements OnInit {
  constructor() { }
ngOnInit() {
   scrollLeft()

  }
  // public loadScript(url: string) {
  //   const body = <HTMLDivElement> document.body;
  //   const script = document.createElement('script');
  //   script.innerHTML = '';
  //   script.src = url;
  //   script.async = false;
  //   script.defer = true;
  //   body.appendChild(script);
  // }

}

从'@angular/core'导入{Component，OnInit}；
声明常量滚动左：任何；
声明常量重置：任何；
@组成部分({
选择器：“应用程序示例”，
templateUrl:'./sample.component.html'，
样式URL:['./sample.component.scss']
})
导出类SampleComponent实现OnInit{
构造函数（）{}
恩戈尼尼特（）{
左滚动（）
}
//公共加载脚本（url:string）{
//const body=document.body；
//const script=document.createElement（'script'）；
//script.innerHTML=''；
//script.src=url；
//script.async=false；
//script.defer=true；
//body.appendChild（脚本）；
// }
}

---

这是我的component.ts文件

您有一个用于该组件的控制器：app.component.ts

let holder = document.querySelectorAll('.container')[0],
cards = document.querySelectorAll('.card');
let preActiveCard = cards[1];
let nextActiveCard = cards[2];
function scrollLeft() {
  holder.classList.remove('next');
  holder.classList.remove('reset');
  holder.classList.add('next');
  preActiveCard.classList.remove('active');
  nextActiveCard.classList.add('active');
  setTimeout(reset, 1200);
}
function reset() {
  holder.classList.remove('next');
  holder.classList.add('reset');
  preActiveCard.classList.add('active');
  nextActiveCard.classList.remove('active');
}
setInterval(scrollLeft, 1500);

---

您应该将函数放在那里。

您有一个用于该组件的控制器：app.component.ts

---

你应该把你的函数放在那里。

你会在这里找到你的答案为什么不把它放在app.component.ts中？也许可以看看angular教程（）。在Angular中，您不提供来自资产的基于组件的逻辑。我有单独的组件文件，我在ngInit（）中调用了这个函数scrollleft（）和reset（）。但它不起作用@chanaCan你可以分享链接@gem007bdy你可以在这里找到你的答案为什么不把这个放在app.component.ts中？也许可以看看angular教程（）。在Angular中，您不提供来自资产的基于组件的逻辑。我有单独的组件文件，我在ngInit（）中调用了这个函数scrollleft（）和reset（）。但它不起作用@chanaCan您是否可以共享链接@gem007bdI调用js函数，在component.ts文件import{component，OnInit}中从“@angular/core”导入；声明常量滚动左：任何；声明常量重置：任何@组件（{selector:'app sample'，templateUrl:'./sample.Component.html'，styleURL:['./sample.Component.scss']}）导出类SampleComponent实现OnInit{constructor（）{}ngOnInit（）{scrollLeft（）}}}我在Component.ts文件导入中调用了js函数{Component，OnInit}来自'@angular/core'；declare const scrollLeft:any；declare const reset:any；@Component（{selector:'app sample'，templateUrl:'./sample.Component.html'，styleUrls:['./sample.Component.scss']}）导出类SampleComponent实现OnInit{constructor（）{ngonit（）{scrollLeft（）}}