Angular 中常用的装饰器有哪些？

推荐答案

在 Angular 中，常用的装饰器包括：

1. @Component: 用于定义一个 Angular 组件。
2. @Directive: 用于定义一个 Angular 指令。
3. @Injectable: 用于定义一个 Angular 服务或依赖注入的类。
4. @NgModule: 用于定义一个 Angular 模块。
5. @Input: 用于将父组件的数据传递给子组件。
6. @Output: 用于从子组件向父组件传递事件。
7. @ViewChild: 用于在组件中获取对子组件或 DOM 元素的引用。
8. @ContentChild: 用于在组件中获取对投影内容的引用。
9. @HostBinding: 用于绑定宿主元素的属性。
10. @HostListener: 用于监听宿主元素的事件。

本题详细解读

@Component

@Component 是 Angular 中最常用的装饰器之一，用于定义一个组件。它接受一个元数据对象，该对象包含组件的模板、样式、选择器等信息。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'MyApp';
}

@Directive

@Directive 用于定义一个指令。指令可以改变 DOM 元素的行为或外观。

-- -------------------- ---- -------
------------
  --------- ----------------
--
------ ----- ------------------ -
  ------------------- --- ----------- --
  --------------------------- -------------- -
    ------------------------------------------- - ---------
  -
-

@Injectable

@Injectable 用于定义一个服务或依赖注入的类。它告诉 Angular 这个类可以通过依赖注入系统进行注入。

@Injectable({
  providedIn: 'root'
})
export class DataService {
  getData() {
    return 'Some data';
  }
}

@NgModule

@NgModule 用于定义一个 Angular 模块。模块是 Angular 应用的基本构建块，用于组织和管理组件、指令、管道和服务。

@NgModule({
  declarations: [AppComponent, HighlightDirective],
  imports: [BrowserModule],
  providers: [DataService],
  bootstrap: [AppComponent]
})
export class AppModule {}

@Input

@Input 用于将父组件的数据传递给子组件。

@Component({
  selector: 'app-child',
  template: `<p>{{ childData }}</p>`
})
export class ChildComponent {
  @Input() childData: string;
}

@Output

@Output 用于从子组件向父组件传递事件。

-- -------------------- ---- -------
------------
  --------- ------------
  --------- -------- ------------------------- --------------
--
------ ----- -------------- -
  --------- --------- - --- -----------------------

  ---------- -
    ------------------------- ---- --------
  -
-

@ViewChild

@ViewChild 用于在组件中获取对子组件或 DOM 元素的引用。

-- -------------------- ---- -------
------------
  --------- -------------
  --------- ----------- --------------------
--
------ ----- --------------- -
  ------------------- --------------- ---------------

  ----------------- -
    ---------------------------------
  -
-

@ContentChild

@ContentChild 用于在组件中获取对投影内容的引用。

-- -------------------- ---- -------
------------
  --------- -------------
  --------- ---------------------------
--
------ ----- --------------- -
  --------------------------------- ----------------- -----------

  -------------------- -
    -----------------------------------
  -
-

@HostBinding

@HostBinding 用于绑定宿主元素的属性。

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  @HostBinding('style.backgroundColor') backgroundColor = 'yellow';
}

@HostListener

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

-- -------------------- ---- -------
------------
  --------- ----------------
--
------ ----- ------------------ -
  --------------------------- -------------- -
    -------------------- - ---------
  -

  --------------------------- -------------- -
    -------------------- - --------------
  -
-