Angular从外部js导入一个类不起作用答案

【问题标题】：Angular import a class from an external js not workAngular从外部js导入一个类不起作用
【发布时间】：2020-05-19 02:12:42
【问题描述】：

我对 angular 和 javasrcipt 很陌生，我正在尝试从 angular 的外部 js 文件导入一个类，但我在导入时遇到错误

//这是我的 responsive.service.js 文件

import { Injectable } from '@angular/core';
import { Subject } from "rxjs/Subject";
import { BehaviorSubject } from "rxjs/BehaviorSubject";
import { Observable } from "rxjs/Observable";


@Injectable()
export class responsiveService {
    private isMobile = new Subject();
    public screenWidth: string;


    constructor() {
        this.checkWidth();
    }

    onMobileChange(status: boolean) {
        this.isMobile.next(status);
    }

    getMobileStatus(): Observable<any> {
        return this.isMobile.asObservable();
    }

    public checkWidth() {
        var width = window.innerWidth;
        if (width <= 768) {
            this.screenWidth = 'sm';
            this.onMobileChange(true);
        } else if (width > 768 && width <= 992) {
            this.screenWidth = 'md';
            this.onMobileChange(false);
        } else {
            this.screenWidth = 'lg';
            this.onMobileChange(false);
        }
    }

//这是在我的应用程序 compnent.ts 文件中

import { Component,OnInit } from '@angular/core';
import {responsiveService} from 'src/assets/myjs/responsive.service.js';




@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
  title='HudumaHealth';
  constructor(private responsiveService:ResponsiveService){
  }

  ngOnInit(){
    this.responsiveService.getMobileStatus().subscribe( isMobile =>{
      if(isMobile){
        console.log('Mobile device detected')
      }
      else{
        console.log('Desktop detected')
      }
    });
    this.onResize();    
  }

  onResize(){
    this.responsiveService.checkWidth();
  }
}

// 这就是我将它称为我的 html 文件的方式

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Sema Pre Diagnostic</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="./assets/sema.png">
  <script src="./assets/myjs/responsive.service.js" type="module"></script>
</head>

<body>
  <div class="app-body" (window:resize)="onResize($event)">
    <app-root></app-root>
  </div>

</body>

// 我不明白为什么无法导入响应类。 //这是错误

ERROR in src/app/app.component.ts(14,41): error TS2304: Cannot find name 'ResponsiveService'.

【问题讨论】：

您的导入语句不正确
你需要在app module.ts的provider数组中添加你的服务提供者

标签： javascript html angular import

【解决方案1】：

更改以下内容：

类名一般以大写字母开头，所以

export class responsiveService

应该是

export class ResponsiveService

在您的 component.ts 中，导入应该是这样的：

import { ResponsiveService } from 'src/assets/myjs/responsive.service.js';

【讨论】：