在Angular中使用getElementById是否可以呢？

在Angular中，建议使用ViewChild与模板进行交互。

ViewChild是一个装饰器，用于配置视图查询。变更检测器会在视图DOM中查找与选择器匹配的第一个元素或指令。如果视图DOM发生变化，并且有一个新的子元素与选择器匹配，属性将被更新。

下面是一个示例：

import { Component, Directive, Input, ViewChild } from '@angular/core';
@Directive({
  selector: 'pane'
})
export class Pane {
  @Input() id!: string;
}
@Component({
  selector: 'example-app',
  template: `
    
    
    Toggle
    
Selected: {{selectedPane}}
  `,
})
export class ViewChildComp {
  @ViewChild(Pane, { static: false }) pane!: Pane;
  selectedPane: string = '';
  shouldShow = true;
  toggle() {
    this.shouldShow = !this.shouldShow;
  }
  ngAfterViewInit() {
    setTimeout(() => { this.selectedPane = this.pane.id; }, 0);
  }
}

这是一个关于在Angular中理解ViewChildren、ContentChildren和QueryList的很好的示例：Understanding ViewChildren, ContentChildren, and QueryList in Angular。

我错了还是`!:`语法不再支持了？

嗯，这个例子来自于angular.io/api/core/ViewChild的API，可能已经过时了。

在Angular中使用getElementById是否可以？这个问题的出现原因是因为在Angular中，推荐使用响应式表单来处理表单控件的操作，而不是直接使用getElementById获取元素。

解决方法是使用响应式表单的方式来处理表单控件。具体的做法是，在HTML模板中定义一个FormControl，并通过[formControl]属性将其与一个input元素绑定。在组件中，我们需要创建一个FormControl实例，并将其赋值给search属性。然后，我们可以通过valueChanges属性来订阅FormControl的值的变化。

在上述代码中，我们创建了一个名为search的FormControl，并将其与一个input元素绑定。然后，我们使用valueChanges属性来订阅FormControl的值的变化。在订阅中，我们通过一系列操作符来处理输入值的变化：filter操作符用于过滤长度大于2的值，debounceTime操作符用于设置延迟时间，distinctUntilChanged操作符用于过滤重复的值，switchMap操作符用于发起ajax请求。

通过使用响应式表单的方式，我们可以更好地处理表单控件的操作，而不需要直接使用getElementById获取元素。这样可以提高代码的可读性和可维护性，并且符合Angular的设计原则。

在Angular中，手动操作DOM是一种不好的做法。在Angular应用程序中，您应该始终使用Angular的方法来渲染页面。因为在大多数情况下，您将来可能需要为您的应用程序提供服务器端渲染，以使其对搜索引擎友好。但是Angular的SSR引擎（Angular Universal）在后端仅模拟XHR对象，而不是DOM方法。

因此，使用getElementById等DOM方法可能会导致问题。在Angular中，推荐使用Angular的方法来操作元素。

如果您需要通过元素的id来获取元素，可以使用Angular的@ViewChild装饰器。@ViewChild装饰器允许您在组件中引用模板中的元素。

以下是一个示例：

<div #myElement>This is my element</div>

import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
  selector: 'app-my-component',
  template: `
    <div #myElement>This is my element</div>
  `
})
export class MyComponent {
  @ViewChild('myElement', {static: true}) myElement: ElementRef;
  ngAfterViewInit() {
    console.log(this.myElement.nativeElement);
  }
}

通过使用@ViewChild装饰器和ElementRef来引用模板中的元素，您可以安全地在Angular中使用元素的id。这样，无论您将来是否需要进行服务器端渲染，都可以避免使用getElementById等方法带来的潜在问题。