Au lieu d'injecter ElementRef
et d'utiliser querySelector
ou similaire à partir de là, un moyen déclaratif peut être utilisé à la place pour accéder directement aux éléments de la vue:
<input #myname>
@ViewChild('myname') input;
élément
ngAfterViewInit() {
console.log(this.input.nativeElement.value);
}
Exemple StackBlitz
- @ViewChild () prend en charge la directive ou le type de composant comme paramètre, ou le nom (chaîne) d'une variable de modèle.
- @ViewChildren () prend également en charge une liste de noms en tant que liste séparée par des virgules (actuellement aucun espace n'est autorisé
@ViewChildren('var1,var2,var3')
).
- @ContentChild () et @ContentChildren () font de même mais dans le DOM léger (
<ng-content>
éléments projetés).
descendance
@ContentChildren()
est le seul qui permet également d'interroger les descendants
@ContentChildren(SomeTypeOrVarName, {descendants: true}) someField;
{descendants: true}
devrait être la valeur par défaut mais n'est pas dans la version 2.0.0 finale et il est considéré comme un bug
Cela a été corrigé dans la version 2.0.1
lis
S'il existe un composant et des directives, le read
paramètre permet de spécifier quelle instance doit être retournée.
Par exemple, ce ViewContainerRef
qui est requis par les composants créés dynamiquement au lieu de la valeur par défautElementRef
@ViewChild('myname', { read: ViewContainerRef }) target;
abonner les modifications
Même si les enfants de vue ne sont définis que lorsque ngAfterViewInit()
est appelé et les enfants de contenu ne sont définis que lorsque ngAfterContentInit()
est appelé, si vous souhaitez vous abonner aux modifications du résultat de la requête, cela doit être fait dansngOnInit()
https://github.com/angular/angular/issues/9689#issuecomment-229247134
@ViewChildren(SomeType) viewChildren;
@ContentChildren(SomeType) contentChildren;
ngOnInit() {
this.viewChildren.changes.subscribe(changes => console.log(changes));
this.contentChildren.changes.subscribe(changes => console.log(changes));
}
accès direct au DOM
peut uniquement interroger des éléments DOM, mais pas des composants ou des instances de directive:
export class MyComponent {
constructor(private elRef:ElementRef) {}
ngAfterViewInit() {
var div = this.elRef.nativeElement.querySelector('div');
console.log(div);
}
// for transcluded content
ngAfterContentInit() {
var div = this.elRef.nativeElement.querySelector('div');
console.log(div);
}
}
obtenir un contenu projeté arbitraire
Voir Accéder au contenu transclus