Angular 17 - QA

Angular Component, Core Directives and Pipes

Angular 17 新增了哪些新的方法

新增了 @for @empty | @if @else | @switch @case @default

@for @empty 和 *ngFor 的区别

更加简单，默认支持 $index, $count, $first, $last, $odd, $even，必须要给 track，可以是方法

@if @else 和 *ngIf 的区别

写法更方便

*ngContainer 的作用是什么

作为一个占位符，和 React的 <></>类似，通常可以结合其他指令一起使用。不会放到 dom 结构中

ngTemplate 是什么

可以定义一个模板元素

build-in pipe 有哪些

date: 'MMM/dd/YYYY', currency: 'CNY', number:'3.3-5', slice:0:2, json, keyvalue

Angular Local Template Querying In Depth

Angular 在组件中如何查找子组件

可以使用装饰器 @ViewChild(ComponentClass or \referId)，通过class匹配时，多个class也只返回第一个。装饰器可以拿到对应组件下面的所有成员变量。
如果使用 ElementRef加上refId，可以拿到对应的 native dom。也可以使用 @ViewChildren找到多个子项

@ViewChild('card'|CardComponent)
card: CardComponent

@ViewChildren(CardComponent)
card: QueryList[CardComponent]

@ViewChildren(CardComponent: {read: ElementRef})
card: QueryList[ElementRef]

什么时候可以操作对应的 dom 或者 component

可以在 Angular 提供的 ngAfterViewInit方法中操作，这个方法会在视图加载完成后调用。但是不要在这个方法中修改视图相关的数据，这样会导致渲染的时候出现错误