In den meisten Fällen möchten Sie verwenden {static: false}
. Wenn Sie dies so einstellen, wird sichergestellt, dass Abfrageübereinstimmungen gefunden werden, die von der Bindungsauflösung abhängen (z. B. strukturelle Anweisungen *ngIf, etc...
).
Beispiel für die Verwendung 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;
}
Das static: false
wird die Standard - Ausweichverhalten in Angular 9. Lesen Sie mehr sein hier und hier
Die { static: true }
Option wurde eingeführt, um das Erstellen eingebetteter Ansichten im laufenden Betrieb zu unterstützen. Wenn Sie eine Ansicht dynamisch erstellen und auf die zugreifen möchten TemplateRef
, können Sie dies nicht tun, ngAfterViewInit
da dies zu einem ExpressionHasChangedAfterChecked
Fehler führt. Wenn Sie das statische Flag auf true setzen, wird Ihre Ansicht in ngOnInit erstellt.
Dennoch:
In den meisten anderen Fällen ist die beste Vorgehensweise die Verwendung {static: false}
.
Beachten Sie jedoch, dass die { static: false }
Option in Winkel 9 als Standard festgelegt wird. Dies bedeutet, dass das Setzen des statischen Flags nicht mehr erforderlich ist, es sei denn, Sie möchten die static: true
Option verwenden.
Mit dem ng update
Befehl angle cli können Sie Ihre aktuelle Codebasis automatisch aktualisieren.
Einen Migrationsleitfaden und noch mehr Informationen dazu finden Sie hier und hier
Was ist der Unterschied zwischen statischen und dynamischen Abfragen?
Die statische Option für @ ViewChild () - und @ ContentChild () -Abfragen bestimmt, wann die Abfrageergebnisse verfügbar werden.
Bei statischen Abfragen (static: true) wird die Abfrage aufgelöst, sobald die Ansicht erstellt wurde, jedoch bevor die Änderungserkennung ausgeführt wird. Das Ergebnis wird jedoch niemals aktualisiert, um Änderungen an Ihrer Ansicht widerzuspiegeln, z. B. Änderungen an den Blöcken ngIf und ngFor.
Bei dynamischen Abfragen (statisch: false) wird die Abfrage entweder nach ngAfterViewInit () oder ngAfterContentInit () für @ViewChild () bzw. @ContentChild () aufgelöst. Das Ergebnis wird aktualisiert, um Änderungen an Ihrer Ansicht vorzunehmen, z. B. Änderungen an den Blöcken ngIf und ngFor.
{ static: true }
. Wenn jedoch kein direkter Zugriff auf das darin enthaltene ViewChild erforderlich istngOnInit
, sollten Sie nur die verwenden{ static: false }
.Als Faustregel können Sie also Folgendes wählen:
{ static: true }
muss festgelegt sein , wenn Sie die zugreifen möchtenViewChild
inngOnInit
.{ static: false }
kann nur in zugegriffen werdenngAfterViewInit
. Dies ist auch das, was Sie tun möchten, wenn Sie eine strukturelle Direktive (dh*ngIf
) für Ihr Element in Ihrer Vorlage haben.quelle
Aus den eckigen Dokumenten
Es kann eine bessere Idee sein,
static:true
wenn das Kind nicht von irgendwelchen Bedingungen abhängig ist. Wenn sich die Sichtbarkeit des Elements ändert,static:false
kann dies zu besseren Ergebnissen führen.PS: Da es sich um eine neue Funktion handelt, müssen wir möglicherweise Benchmarks für die Leistung ausführen.
Bearbeiten
Wie von @Massimiliano Sartoretto erwähnt, kann Github Commit Ihnen weitere Einblicke geben.
quelle
Kam hierher, weil ein ViewChild in ngOnInit nach dem Upgrade auf Angular 8 null war.
Statische Abfragen werden vor ngOnInit gefüllt, während dynamische Abfragen (statisch: false) danach gefüllt werden. Mit anderen Worten, wenn ein Ansichtskind in ngOnInit jetzt null ist, nachdem Sie static: false festgelegt haben, sollten Sie in Betracht ziehen, in static: true zu wechseln oder Code nach ngAfterViewInit zu verschieben.
Siehe https://github.com/angular/angular/blob/master/packages/core/src/view/view.ts#L332-L336
Die anderen Antworten sind korrekt und erklären, warum dies der Fall ist: Abfragen, die von strukturellen Anweisungen abhängen, z. B. eine ViewChild-Referenz in einer ngIf, sollten ausgeführt werden, nachdem die Bedingung dieser Anweisung gelöst wurde, dh nach der Erkennung von Änderungen. Man kann jedoch sicher static: true verwenden und so die Abfragen vor ngOnInit für nicht verschachtelte Referenzen auflösen. Imho dieser spezielle Fall zu erwähnen, als eine Null-Ausnahme könnte wahrscheinlich der erste Weg sein, wie Sie auf diese Besonderheit stoßen, wie es für mich war.
quelle
View Child @angular 5+ Token zwei Argumente ('lokaler Referenzname', statisch: false | true)
Um den Unterschied zwischen wahr und falsch zu erkennen, überprüfen Sie dies
quelle
In ng8 können Sie manuell festlegen, wann auf die untergeordnete Komponente in der übergeordneten Komponente zugegriffen werden soll. Wenn Sie static auf true setzen, bedeutet dies, dass die übergeordnete Komponente nur die Definition der Komponente im
onInit
Hook erhält : Beispiel:Wenn static falsch ist, erhalten Sie die Definition nur in ngAfterViewInit (), in ngOnInit () werden Sie undefiniert.
quelle