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

Question

i'm very new to angular and javasrcipt, I'm trying to import a class from an external js file in angular but im getting errors in the import我对 angular 和 javasrcipt 非常陌生，我正在尝试从 angular 的外部 js 文件中导入一个类，但我在导入时遇到错误

//this is my responsive.service.js file //这是我的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);
        }
    }

//this is on my app compnent.ts file //这是在我的应用程序 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();
  }
}

// this is how i called it my html file // 这就是我如何称呼它为我的 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>

// i dont understand why response class cannot be imported . // 我不明白为什么不能导入响应类。 //this is the error //这是错误

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

Answer 1

Change the following things:更改以下内容：

class names generally start with a capital letter so类名通常以大写字母开头，因此

export class responsiveService

should be应该

export class ResponsiveService

and in your component.ts the import should be like this:在你的 component.ts 中，导入应该是这样的：

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

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

问题描述

1 个解决方案

解决方案1
0 2020-02-03 10:29:29

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

问题描述

1 个解决方案

解决方案1 0 2020-02-03 10:29:29

解决方案1
0 2020-02-03 10:29:29