我有這個組件：
<div #widget
class="widget">
</div>
@ViewChild('widget') widget!: any;
ngOnInit() {
console.log(this.widget.nativeElement) //returns undedined
}
但是，如果我使用本機 api，它就可以作業：
console.log(document.querySelector('.widget'));
然后我做了一些研究并弄清楚：
@ViewChild('widget', {static: true}) widget!: any;
它修復了尋找這個問題的答案的原生元素，但是那里的主要答案相當混亂：
在大多數情況下，您會想要使用 {static: false}。像這樣設定它可以確保找到依賴于系結決議的查詢匹配（如結構指令 *ngIf 等）。
和
引入了 { static: true } 選項以支持動態創建嵌入式視圖。當您動態創建視圖并希望訪問 TemplateRef 時，您將無法在 ngAfterViewInit 中這樣做，因為它會導致 ExpressionHasChangedAfterChecked 錯誤。將靜態標志設定為 true 將在 ngOnInit 中創建您的視圖。
所以現在我確實有幾個問題
- 這是否意味著
@ViewChild('widget', {static: true}) widget!等于document.querySelector('.widget')？ - 在什么情況下我必須使用
@ViewChild('widget', {static: true}) widget!vs時它們是否不相等document.querySelector('.widget')？ - 在什么情況下我應該使用
@ViewChild('widget', {static: true}) widget!vs@ViewChild('widget', {static: false}) widget!？ - 就我而言，我沒有使用任何動態視圖，但建議使用的參考答案
{static: false}非常奇怪。
uj5u.com熱心網友回復：
關于
{static:true}vs{static:false}。如果您的“div”不在 *ngIf 下 - 它始終可見 - 您可以指示 Angular 不“檢查”是否存在，否則每次只在組件的第一階段檢查一次。為此，您使用
{static:true}. 通過這種方式，您可以在 ngOnInit 中盡早訪問關于
document.querySelector('.widget')vs@ViewChild真正的 ViewChild 你得到一個 ElementRef （在你得到“HTML元素”的屬性 nativeElement 中）。因此，使用 ViewChild，您不僅可以訪問“HTML 元素”，還可以訪問該組件，如果標簽具有該指令的指令……真的，您可以獲得對任何組件的“參考”或指令或 HTML 元素。
如果你只有一個簡單的標簽（一個 div、一個 H1、ap、...），那么“Angular 方式”也是使用 ViewChild 來隔離或封裝而不依賴于是否在導航器中執行（真的你得到一個對 DOM 的參考，有些人喜歡
<div ng_content-1 ....>)，但是您可以使用 reference.nativeElement 和 document.querySelector 來做同樣的事情，實際上并沒有太大區別
uj5u.com熱心網友回復：
您只能在視圖初始化后訪問您的小部件。
因此，ngOnInit()您可以在ngAfterViewInit().
export class AddUpdateFormComponent implements AfterViewInit {
@ViewChild('widget') widget!: any;
ngAfterViewInit() : void {
console.log(this.widget.nativeElement)
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/531722.html
標籤：有角度的视童查询选择器