Question

假设我有一些类似于以下内容的JS代码： blah.js：

   $(document).ready(function() {
      $("#navigation".click())
      {
         $("#navigation").animate('blah');
      }
   });

将这个JS包含在Angular应用程序中的最佳方法是什么？我只是在组件文件中包含require脚本吗？

import { Component } from '@angular/core';

require ('blah.js');

@Component
({
   selector: 'home',
   template: ...,
   styles: ...
})

export class HomeComponent
{
}

道歉，如果问题不清楚，我对Angular 2很新。

Answer 1

这不是Angular的做事方式。您需要将此代码转换为Angular组件。您应该创建<app-navigation>组件。

<强> navigation.component.ts

@Component
({
   selector: 'app-navigation',
   template: ...,
   styles: ...
})

export class NavigationComponent
{
     @ViewChild('navigation') navigation: ElementRef;

     onClick() {
         // Do your stuff
         // If you need to access navigation DOM element
         // Use this.navigation.nativeElement
     } 
}

<强> navigation.component.html

<div id="navigation" #navigation> ... </div>

Answer 2

您经常会在assets下看到一个src文件夹，而该文件夹又有一个scripts文件夹。 app/src/scripts/js/*.js。这是存储JavaScript文件的好地方。

您可以创建文件并将其附加到窗口对象：

   window.ready = function() {
      $("#navigation".click())
      {
         $("#navigation").animate('blah');
      }
   });

返回您的应用，您可以创建一个组件或服务，然后按照以下方式从中调用*.js功能：

@Component
({
   selector: 'app-navigation',
   template: ...,
   styles: ...
})

export class NavigationComponent
{
     @ViewChild('navigation') navigation: ElementRef;

     onClick() {
         // Do your stuff
         // If you need to access navigation DOM element
         // Use this.navigation.nativeElement

         // Call your function
         (<any>window).ready();
     } 
}

自定义JS在Angular中属于哪里？

2 个答案: