框架集成：17 Angular组件与HT - 详细教程与实战指南

// 生命周期钩子使用示例
export class UserComponent implements OnInit, OnDestroy, OnChanges {
  @Input() userId!: number;

  // 输入属性变化
  ngOnChanges(changes: SimpleChanges) {
    if (changes['userId']) {
      console.log('userId changed:', changes['userId']);
    }
  }

  // 初始化
  ngOnInit() {
    this.loadUserData();
  }

  // 销毁清理
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

// 子组件：user-card.component.ts
@Component({
  selector: 'app-user-card',
  template: `
    <div class="card" (click)="onSelect()">
      <h3>{{ user.name }}</h3>
      <p>{{ user.email }}</p>
      <button (click)="onDelete($event)">删除</button>
    </div>
  `
})
export class UserCardComponent {
  // @Input: 父→子 数据传递
  @Input() user!: User;
  @Input() isSelected = false;

  // @Output: 子→父 事件通知
  @Output() selected = new EventEmitter<User>();
  @Output() deleted = new EventEmitter<number>();

  onSelect() {
    this.selected.emit(this.user);
  }

  onDelete(event: Event) {
    event.stopPropagation();  // 阻止冒泡
    this.deleted.emit(this.user.id);
  }
}

// 父组件使用
<app-user-card
  [user]="currentUser"
  [isSelected]="isSelected"
  (selected)="onUserSelected($event)"
  (deleted)="onUserDeleted($event)">
</app-user-card>

// 卡片组件 - 使用ng-content进行内容投影
@Component({
  selector: 'app-card',
  template: `
    <div class="card">
      <div class="card-header">
        <ng-content select="[card-header]"></ng-content>
      </div>
      <div class="card-body">
        <ng-content></ng-content>  <!-- 默认投影位置 -->
      </div>
      <div class="card-footer">
        <ng-content select="[card-footer]"></ng-content>
      </div>
    </div>
  `
})
export class CardComponent {}

// 父组件使用
<app-card>
  <div card-header>标题区域</div>
  <p>这是卡片内容（投影到默认位置）</p>
  <button card-footer>底部按钮</button>
</app-card>

// 动态组件加载
@Component({
  selector: 'app-dynamic-loader',
  template: '<ng-container #container></ng-container>'
})
export class DynamicLoaderComponent implements OnInit {
  @ViewChild('container', { read: ViewContainerRef })
  container!: ViewContainerRef;

  constructor(private resolver: ComponentFactoryResolver) {}

  loadComponent(component: Type<any>) {
    this.container.clear();
    const factory = this.resolver.resolveComponentFactory(component);
    const componentRef = this.container.createComponent(factory);
    // 传递数据
    componentRef.instance.data = someData;
  }
}

// ViewChildren: 查询多个子组件/元素
@Component({
  selector: 'app-tab-group',
  template: `
    <div class="tabs">
      <app-tab *ngFor="let tab of tabs" [tab]="tab">
      </app-tab>
    </div>
  `
})
export class TabGroupComponent {
  @ViewChildren(TabComponent) tabComponents!: QueryList<TabComponent>;

  ngAfterViewInit() {
    this.tabComponents.forEach(tab => {
      console.log(tab.title);
    });
    // 监听子组件变化
    this.tabComponents.changes.subscribe(tabs => {
      console.log('Tabs changed:', tabs.length);
    });
  }
}

// ViewChild: 查询单个子组件/元素
@Component({
  template: `
    <input #searchInput />
    <app-child-component></app-child-component>
  `
})
export class ParentComponent implements AfterViewInit {
  @ViewChild('searchInput') searchInput!: ElementRef;
  @ViewChild(ChildComponent) child!: ChildComponent;

  ngAfterViewInit() {
    this.searchInput.nativeElement.focus();
    this.child.doSomething();
  }
}

// 不推荐：构造函数中做太多事情
constructor(private http: HttpClient) {
  this.http.get('/api/users').subscribe(users => this.users = users);
}

// 推荐：ngOnInit中初始化
constructor(private http: HttpClient) {}
ngOnInit() {
  this.http.get('/api/users').subscribe(users => this.users = users);
}

// 不推荐：忘记取消订阅
ngOnInit() {
  this.service.getData().subscribe(data => this.data = data);
}

// 推荐：使用AsyncPipe或takeUntil
data$ = this.service.getData();  // 模板中用 | async
// 或
ngOnInit() {
  this.service.getData()
    .pipe(takeUntil(this.destroy$))
    .subscribe(data => this.data = data);
}
ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

// 不推荐：直接操作DOM
@ViewChild('element') element!: ElementRef;
this.element.nativeElement.style.color = 'red';

// 推荐：使用Renderer2
constructor(private renderer: Renderer2) {}
this.renderer.setStyle(this.element.nativeElement, 'color', 'red');