Angular/TypeScript中那些值得了解的知识——注解

这篇文章距离上次修改已过433天，其中的内容可能已经有所变动。

在Angular和TypeScript中，注解或注释（annotations）是一种将元数据与代码相关联的方式。注解可以用于声明依赖注入、路由配置、数据绑定等。

以下是一些在Angular/TypeScript中值得了解的注解：

@Component - 用于定义一个组件的元数据，包括模板、样式和视图交互。




@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  // 组件逻辑
}

@Input - 用于在组件间通过属性接收输入。




@Component({...})
export class ExampleComponent {
  @Input() title: string;
}

@Output - 用于在组件间发出输出事件。




@Component({...})
export class ExampleComponent {
  @Output() update = new EventEmitter<string>();
}

@Directive - 用于定义一个指令，可以用来增强现有DOM元素的行为。




@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  // 指令逻辑
}

@Injectable - 用于定义一个类的依赖注入行为。




@Injectable({
  providedIn: 'root'
})
export class ExampleService {
  // 服务逻辑
}

@NgModule - 用于定义一个Angular模块，可以包含组件、指令、提供者等。




@NgModule({
  declarations: [
    ExampleComponent,
    // 更多组件和指令
  ],
  imports: [
    // 导入其他模块
  ],
  providers: [
    // 服务提供者
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

@Inject - 用于注入依赖项。




export class ExampleService {
  constructor(@Inject(HTTP) http: HttpClient) {
    // 使用http
  }
}

@ViewChild - 用于在视图中查询子组件或指令的实例。




@Component({...})
export class ExampleComponent {
  @ViewChild(ChildComponent) child: ChildComponent;
}

@HostListener - 用于监听宿主元素上的事件。




@HostListener('click', ['$event'])
clickHandler(event: MouseEvent) {
  // 处理点击事件
}

@Pipe - 用于定义一个管道，用于格式化数据在模板中的显示。




@Pipe({
  name: 'examplePipe'
})
export class ExamplePipe implements PipeTransform {
  transform(value: any, args?: any): any {
    // 转换逻辑
    return value;
  }
}

这些注解为Angular应用程序的开发提供了强大的元数据驱动行为。了解和使用这些注解可以帮助开发者编写更清晰、更可维护的代码。

Angular/TypeScript中那些值得了解的知识——注解

评论已关闭

推荐阅读