Yeni Angular 8 view alt öğesini nasıl yapılandırmalıyım?

@ViewChild('searchText', {read: ElementRef, static: false})
public searchTextInput: ElementRef;

vs

@ViewChild('searchText', {read: ElementRef, static: true})
public searchTextInput: ElementRef;

Hangisi daha iyi? Ne zaman static:truevs kullanmalıyım static:false?

Çoğu durumda kullanmak isteyeceksiniz {static: false}. Bunun böyle ayarlanması, bağlayıcı çözünürlüğe (yapısal yönergeler gibi *ngIf, etc...) bağlı olan sorgu eşleşmelerinin bulunmasını sağlayacaktır.

Ne zaman kullanılacağına örnek static: false:

@Component({
  template: `
    <div *ngIf="showMe" #viewMe>Am I here?</div>
    <button (click)="showMe = !showMe"></button>
  ` 
})
export class ExampleComponent {
  @ViewChild('viewMe', { static: false })
  viewMe?: ElementRef<HTMLElement>; 

  showMe = false;
}

static: falseDaha Açısal 9. okuyun varsayılan yedek davranış olacak burada ve burada

{ static: true }Seçenek anında gömülü görünüm oluşturma desteklemek tanıtıldı. Dinamik bir görünüm oluştururken ve öğesine erişmek istediğinizde TemplateRef, hataya ngAfterViewInitneden olacağı için bunu yapamazsınız ExpressionHasChangedAfterChecked. Statik bayrağı true olarak ayarlamak, ngOnInit'te görünümünüzü oluşturur.

Yine:

Diğer çoğu durumda, en iyi uygulama kullanmaktır {static: false}.

Bu { static: false }seçeneğin Açısal 9'da varsayılan olarak ayarlanacağını unutmayın static: true. Bu , seçeneği kullanmak istemediğiniz sürece statik bayrağın ayarlanmasının artık gerekli olmadığı anlamına gelir .

ng updateGeçerli kod tabanınızı otomatik olarak yükseltmek için açısal cli komutunu kullanabilirsiniz.

Bir taşıma kılavuzu ve bununla ilgili daha fazla bilgi için burayı ve buradan kontrol edebilirsiniz

Statik ve dinamik sorgular arasındaki fark nedir?

@ViewChild () ve @ContentChild () sorguları için statik seçenek, sorgu sonuçlarının ne zaman kullanılabilir olacağını belirler.

Statik sorgular (static: true) ile, görünüm oluşturulduktan sonra ancak değişiklik algılama çalışmadan önce sorgu çözülür. Ancak sonuç, ngIf ve ngFor bloklarındaki değişiklikler gibi görünümünüzdeki değişiklikleri yansıtacak şekilde asla güncellenmeyecektir.

Dinamik sorgularla (statik: false), sorgu @ViewChild () ve @ContentChild () için sırasıyla ngAfterViewInit () veya ngAfterContentInit () sonrasında çözümlenir. Sonuç, görünümünüzdeki ngIf ve ngFor bloklarındaki değişiklikler gibi değişiklikler için güncellenecektir.

Yani bir kural olarak aşağıdakiler için gidebilirsiniz:

• { static: true }Eğer erişmek istediğinizde ihtiyaçları set olmak ViewChildin ngOnInit.

• { static: false }yalnızca adresine erişilebilir ngAfterViewInit. Bu, *ngIfşablonunuzdaki öğeniz hakkında yapısal bir yönerge (örn. ) Olduğunda da gitmek istediğiniz şeydir .

Açısal dokümanlardan

statik - değişiklik algılama çalıştırmadan önce sorgu sonuçlarının çözülüp çözülmeyeceği (örneğin yalnızca statik sonuçlar döndürün). Bu seçenek sağlanmazsa, derleyici varsayılan davranışına geri döner; bu, sorgu çözümlemesinin zamanlamasını belirlemek için sorgu sonuçlarını kullanmaktır. Herhangi bir sorgu sonucu iç içe bir görünümün içindeyse (örn. * NgIf), değişiklik algılama çalıştırıldıktan sonra sorgu çözülür. Aksi takdirde, değişiklik algılama çalışmadan önce çözülecektir.

static:trueÇocuk herhangi bir koşula bağlı değilse kullanmak daha iyi bir fikir olabilir . Elemanın görünürlüğü değişirse, daha static:falseiyi sonuçlar verebilir.

Not: Yeni bir özellik olduğundan, performans için karşılaştırmalar yapmamız gerekebilir.

Düzenle

@Massimiliano Sartoretto tarafından belirtildiği gibi, github taahhüdü size daha fazla bilgi verebilir.

Açısal 8'e yükselttikten sonra bir ViewChild ngOnInit'te boş olduğu için buraya geldi.

Statik sorgular ngOnInit'ten önce, dinamik sorgular (statik: yanlış) sonra doldurulur. Başka bir deyişle, static: false ayarladıktan sonra ngOnInit içinde bir viewchild artık null olursa, static: true olarak değiştirmeyi veya kodu ngAfterViewInit olarak değiştirmeyi düşünmelisiniz.

Bkz. Https://github.com/angular/angular/blob/master/packages/core/src/view/view.ts#L332-L336

Diğer yanıtlar doğrudur ve neden böyle olduğunu açıklayın: Yapısal yönergelere bağlı olan sorgular, örneğin bir ngIf içindeki bir ViewChild başvurusu, bu yönergenin koşulu çözüldükten sonra, yani değişiklik algılandıktan sonra çalıştırılmalıdır. Ancak, statik: true güvenli bir şekilde kullanılabilir ve böylece dürüst olmayan başvurular için ngOnInit önce sorguları çözmek. Bu özel davanın boş bir istisna olarak bahsetmesi benim için olduğu gibi bu özelliğe rastlayacağınız ilk yol olabilir.

child @angular 5+ token iki bağımsız değişkeni görüntüle ('yerel başvuru adı', statik: false | true)

@ViewChild('nameInput', { static: false }) nameInputRef: ElementRef;

doğru ve yanlış arasındaki farkı bilmek

statik - değişiklik algılama çalıştırmadan önce sorgu sonuçlarının çözülüp çözülmeyeceği (örneğin yalnızca statik sonuçlar döndürün). Bu seçenek sağlanmazsa, derleyici varsayılan davranışına geri döner; bu, sorgu çözümlemesinin zamanlamasını belirlemek için sorgu sonuçlarını kullanmaktır. Herhangi bir sorgu sonucu iç içe bir görünümün içindeyse (örn. * NgIf), değişiklik algılama çalıştırıldıktan sonra sorgu çözülür. Aksi takdirde, değişiklik algılama çalışmadan önce çözülecektir.

Ng8'de, ana bileşendeki alt bileşene ne zaman erişileceğini elle ayarlayabilirsiniz. Statik'i true olarak ayarladığınızda, üst bileşen yalnızca kancadaki bileşenin tanımını alır onInit: Örneğin:

 // You got a childComponent which has a ngIf/for tag
ngOnInit(){
  console.log(this.childComponent);
}

ngAfterViewInit(){
  console.log(this.childComponent);
}

Statik false olursa, tanımlamayı yalnızca ngAfterViewInit () 'de alırsınız, ngOnInit ()' de tanımsız kalırsınız.