Error:Decorators are not valid here. 使用Angular中的装饰器

Decorators are not valid here,项目中出现这个提示信息,说明装饰器未知错误、或者在不支持的元素上使用了装饰器。

如下图所示,我在@NgModule装饰器后面加了一个导出方法,加完之后控制台提示了如下错误:Error TS1206:Decorators are not valid here.。@NgModule装饰器应该直接放在类定义之前,而代码中装饰器放在了方法前面,所以装饰器在这里无效:

修改对应位置的代码,@NgModule装饰器放在SharedModule前面,把getEcharts方法放在装饰器的前面或者类定义的后面,就好了:

在Angular中,装饰器是用来增强类、方法、属性和参数的强大工具。它们允许你添加元数据,改变行为,并使代码更具可读性和可维护性,在使用装饰器时,要知道使用了哪个装饰器,装饰器用在了哪个元素上。

常见的装饰器有下面几种,它们分别对应着一种使用情景

  • @Component:定义一个组件
ts 复制代码
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  // ...
}
  • @Directive:定义一个自定义指令
ts 复制代码
import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }
}
  • @NgModule:定义一个Angular模块
ts 复制代码
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
  • @Injectable:定义一个Angular服务
ts 复制代码
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MyService {
  // ...
}
  • @Input:定义一个组件的输入属性
ts 复制代码
import { Component, Input } from '@angular/core';

@Component({
  // ...
})
export class MyComponent {
  @Input() name: string;
}
  • @Output:定义一个组件的输出属性
ts 复制代码
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  // ...
})
export class MyComponent {
  @Output() onButtonClicked = new EventEmitter<any>();

  onClick() {
    this.onButtonClicked.emit('Button clicked!');
  }
}
  • @HostListenter:鉴定宿主元素的事件
ts 复制代码
import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[appClick]'
})
export class ClickDirective {
  @HostListener('click') onClick() {
    console.log('Click event!');
  }
}
  • @HostBinding:绑定宿主元素的属性
ts 复制代码
import { Directive, HostBinding } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  @HostBinding('style.backgroundColor') backgroundColor = 'yellow';
}
  • @Pipe:定义一个Angular管道
ts 复制代码
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'capitalize'
})
export class CapitalizePipe implements PipeTransform {
  transform(value: string): string {
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
}
  • @ViewChild:获取模板中子组件的引用
ts 复制代码
import { Component, ViewChild } from '@angular/core';
import { MyComponent } from './my-component.component';

@Component({
  // ...
})
export class ParentComponent {
  @ViewChild(MyComponent) myComponent: MyComponent;

  // ...
}
  • @ContentChild:获取模板中内容投影的引用
ts 复制代码
import { Component, ContentChild } from '@angular/core';
import { MyComponent } from './my-component.component';

@Component({
  // ...
})
export class ParentComponent {
  @ContentChild(MyComponent) myComponent: MyComponent;

  // ...
}
  • @Inject:在依赖注入时指定要注入的依赖项
ts 复制代码
import { Injectable, Inject } from '@angular/core';
import { MY_TOKEN } from './my-token';

@Injectable({
  providedIn: 'root'
})
export class MyService {
  constructor(@Inject(MY_TOKEN) private myValue: string) {
    // ...
  }
}
  • @Optional:在依赖注入时指定依赖项是可选的
ts 复制代码
import { Injectable, Inject, Optional } from '@angular/core';
import { MY_TOKEN } from './my-token';

@Injectable({
  providedIn: 'root'
})
export class MyService {
  constructor(@Optional() @Inject(MY_TOKEN) private myValue: string) {
    // ...
  }
}
  • @SkipSelf:在依赖注入时跳过自身的提供者
ts 复制代码
import { Injectable, Inject, SkipSelf } from '@angular/core';
import { MY_TOKEN } from './my-token';

@Injectable({
  providedIn: 'root'
})
export class MyService {
  constructor(@SkipSelf() @Inject(MY_TOKEN) private myValue: string) {
    // ...
  }
}
  • @Self:在依赖注入时只查找自身提供者
ts 复制代码
import { Injectable, Inject, Self } from '@angular/core';
import { MY_TOKEN } from './my-token';

@Injectable({
  providedIn: 'root'
})
export class MyService {
  constructor(@Self() @Inject(MY_TOKEN) private myValue: string) {
    // ...
  }
}
  • @forwardRef:解决循环依赖问题
ts 复制代码
import { forwardRef, Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AService {
  constructor(private bService: BService) {
    // ...
  }
}

@Injectable({
  providedIn: 'root'
})
export class BService {
  constructor(private aService: AService) {
    // ...
  }
}
ts 复制代码
import { forwardRef, Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AService {
  constructor(private bService: BService) {
    // ...
  }
}

@Injectable({
  providedIn: 'root'
})
export class BService {
  constructor(@Inject(forwardRef(() => AService)) private aService: AService) {
    // ...
  }
}
相关推荐
EasyNTS12 分钟前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜2 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点2 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow2 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o2 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic3 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā3 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年4 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder4 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727574 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架