Back to Details

angular-components

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Angular Components

Angular 组件

Version: Angular 21 (2025) Tags: Components, @Component, Architecture
References: Components Guide • @Component API
版本： Angular 21 (2025) 标签： Components, @Component, 架构
参考资料： 组件指南 • @Component API

Best Practices

最佳实践

  • Create standalone component
ts
@Component({
  standalone: true,
  selector: 'app-my',
  imports: [CommonModule],
  template: `<p>Content</p>`
})
export class MyComponent {}
  • Use inputs with signals
ts
@Component({})
export class MyComponent {
  data = input<string>('');
  required = input.required<User>();
  
  computed = computed(() => this.data()?.name);
}
  • Use outputs for events
ts
@Component({})
export class MyComponent {
  data = output<string>();
  
  onClick() {
    this.data.emit('event');
  }
}
  • Use template reference variables
ts
@Component({
  template: `
    <input #nameInput>
    <button (click)="onSubmit(nameInput.value)">Submit</button>
  `
})
export class MyComponent {}
  • Use content projection
ts
@Component({
  selector: 'app-card',
  template: `
    <div class="header">
      <ng-content select="[header]"></ng-content>
    </div>
    <div class="body">
      <ng-content></ng-content>
    </div>
  `
})
export class CardComponent {}
  • Use change detection strategy
ts
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class OptimizedComponent {}
  • Use encapsulation
ts
@Component({
  encapsulation: ViewEncapsulation.None // or Emulated, ShadowDom
})
export class StyledComponent {}
  • Use host binding
ts
@Component({
  host: {
    '[class.active]': 'isActive',
    '(click)': 'onClick()'
  }
})
export class HostComponent {
  isActive = false;
}
  • 创建独立组件
ts
@Component({
  standalone: true,
  selector: 'app-my',
  imports: [CommonModule],
  template: `<p>Content</p>`
})
export class MyComponent {}
  • 配合signals使用inputs
ts
@Component({})
export class MyComponent {
  data = input<string>('');
  required = input.required<User>();
  
  computed = computed(() => this.data()?.name);
}
  • 使用outputs处理事件
ts
@Component({})
export class MyComponent {
  data = output<string>();
  
  onClick() {
    this.data.emit('event');
  }
}
  • 使用模板引用变量
ts
@Component({
  template: `
    <input #nameInput>
    <button (click)="onSubmit(nameInput.value)">Submit</button>
  `
})
export class MyComponent {}
  • 使用内容投影
ts
@Component({
  selector: 'app-card',
  template: `
    <div class="header">
      <ng-content select="[header]"></ng-content>
    </div>
    <div class="body">
      <ng-content></ng-content>
    </div>
  `
})
export class CardComponent {}
  • 使用变更检测策略
ts
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class OptimizedComponent {}
  • 使用样式封装
ts
@Component({
  encapsulation: ViewEncapsulation.None // or Emulated, ShadowDom
})
export class StyledComponent {}
  • 使用host绑定
ts
@Component({
  host: {
    '[class.active]': 'isActive',
    '(click)': 'onClick()'
  }
})
export class HostComponent {
  isActive = false;
}