Ich kann nicht verstehen, was der Unterschied zwischen ngOnInit
und ist ngAfterViewInit
.
Ich fand den einzigen Unterschied zwischen ihnen ist @ViewChild
. Nach dem folgenden Code sind die elementRef.nativeElement
in ihnen gleich.
Welche Szene sollen wir verwenden ngAfterViewInit
?
@Component({
selector: 'my-child-view',
template: `
<div id="my-child-view-id">{{hero}}</div>
`
})
export class ChildViewComponent {
@Input() hero: string = 'Jack';
}
//////////////////////
@Component({
selector: 'after-view',
template: `
<div id="after-view-id">-- child view begins --</div>
<my-child-view [hero]="heroName"></my-child-view>
<div>-- child view ends --</div>`
+ `
<p *ngIf="comment" class="comment">
{{comment}}
</p>
`
})
export class AfterViewComponent implements AfterViewInit, OnInit {
private prevHero = '';
public heroName = 'Tom';
public comment = '';
// Query for a VIEW child of type `ChildViewComponent`
@ViewChild(ChildViewComponent) viewChild: ChildViewComponent;
constructor(private logger: LoggerService, private elementRef: ElementRef) {
}
ngOnInit() {
console.log('OnInit');
console.log(this.elementRef.nativeElement.querySelector('#my-child-view-id'));
console.log(this.elementRef.nativeElement.querySelector('#after-view-id'));
console.log(this.viewChild);
console.log(this.elementRef.nativeElement.querySelector('p'));
}
ngAfterViewInit() {
console.log('AfterViewInit');
console.log(this.elementRef.nativeElement.querySelector('#my-child-view-id'));
console.log(this.elementRef.nativeElement.querySelector('#after-view-id'));
console.log(this.viewChild);
console.log(this.elementRef.nativeElement.querySelector('p'));
}
}
display: hidden
es bis zum Rendern angezeigt, ist jedoch auf dem Bildschirm nicht sichtbar. Wenn Sie das DOM jedoch mit den devtools des Browsers untersuchen, können Sie das Markup sehen.ViewChild
(vc) auf verfügbar istonNgInit
? plnkr.co/edit/AzhRe6bjnuPLKJWEJGwp?p=preview , können Sie bitte erklären?ngOnInit
. Wenn Sie Inhalte haben, die zum Beispiel von*ngFor
Datenübertragungen an eine übertragen werden@Input
, sind diese Inhalte noch nicht verfügbar inngOnInit
ngOnInit()
wird direkt aufgerufen, nachdem die datengebundenen Eigenschaften der Direktive zum ersten Mal überprüft wurden und bevor eines ihrer untergeordneten Elemente überprüft wurde. Es wird nur einmal aufgerufen, wenn die Direktive instanziiert wird.ngAfterViewInit()
wird aufgerufen, nachdem die Ansicht einer Komponente und die Ansichten ihrer untergeordneten Elemente erstellt wurden. Es handelt sich um einen Lifecycle-Hook, der aufgerufen wird, nachdem die Ansicht einer Komponente vollständig initialisiert wurde.quelle
Inhalt ist das, was als Kinder weitergegeben wird. Ansicht ist die Vorlage der aktuellen Komponente.
Die Ansicht wird vor dem Inhalt initialisiert und
ngAfterViewInit()
daher vorher aufgerufenngAfterContentInit()
.**
ngAfterViewInit()
wird aufgerufen, wenn die Bindungen der untergeordneten Anweisungen (oder Komponenten) zum ersten Mal überprüft wurden. Daher ist es perfekt für den Zugriff auf und die Bearbeitung von DOM mit Angular 2-Komponenten. Wie @ Günter Zöchbauer bereits erwähnt hat,@ViewChild()
läuft es also gut hinein.Beispiel:
quelle