[英]Angular import a class from an external js not work
我对 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'.
更改以下内容:
类名通常以大写字母开头,因此
export class responsiveService
应该
export class ResponsiveService
在你的 component.ts 中,导入应该是这样的:
import { ResponsiveService } from 'src/assets/myjs/responsive.service.js';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.