querySelectorAll 不能与 Angular 一起使用，但可以在控制台中使用

Question

我有一个包含一些复选框的 div，我想使用 querySelectorAll 访问这些复选框，但它似乎在 Angular 中不起作用，尽管它在控制台中有效。

@Component({
  selector: "formly-field-categories-helper",
  template: `
    <div [innerHTML]="categories"></div>
  `
})



ngOnInit() { 
 let inputs = '<input type="checkboxes" name="group" /> test`
 this.categories = this.sanitizer.bypassSecurityTrustHtml(inputs); 
}

ngAfterViewInit() {
  //alerts 0 
  alert(document.querySelectorAll('[name="groups"]').length);
}

但是当我打开 cosole 并运行 document.querySelectorAll('[name="groups"]').length 时，它给了我 192（不是 0）

您可以从这里查看完整代码 https://github.com/goblins-tech/almogtama3/blob/master/src/app/content/editor.ts#L248

注意 使用setTimeout 将解决问题，但我不使用它。我只想在 DOM 完全创建后运行代码。

setTimeout(() => {
      alert(document.querySelectorAll('[name="groups"]').length);
    }, 5000);

注意 ngAfterViewChecked 运行多次，所以我避免使用它。

在下一步中，我会将document.querySelectorAll 替换为nativeElement.querySelectorAll

Answer 1

美好的一天！

你试过这样的吗？

ngAfterViewInit() {
  setTimeout(() => {
    alert(document.querySelectorAll('[name="groups"]').length);
  });
}