One place for hosting & domains

      Cómo usar ViewChild en Angular para acceder a una directiva, un componente secundario o un elemento DOM


      Introducción

      Este artículo le introducirá el decorador ViewChild de Angular.

      Es posible que existan situaciones en las que desee acceder a una directiva, componente secundario o elemento DOM de una clase principal de componentes. El decorador ViewChild devuelve el primer elemento que coincide con una directiva, un componente o un selector de referencia de plantillas concreto.

      Uso de ViewChild con Directivas

      ViewChild hace que sea posible acceder a directivas.

      Digamos que tenemos una SharkDirective.

      Idealmente, usará @angular/cli para generar (generate) su directiva:

      • ng generate directive shark

      De lo contrario, es posible que necesite añadirlo manualmente a app.module.ts:

      app.module.ts

      import { SharkDirective } from './shark.directive';
      ...
      @NgModule({
        declarations: [
          AppComponent,
          SharkDirective
        ],
        ...
      })
      

      Nuestra directiva buscará elementos con el atributo appShark y preparará el texto en el elemento con la palabra Shark:

      shark.directive.ts

      import {
        Directive,
        ElementRef,
        Renderer2
      } from '@angular/core';
      
      @Directive(
        { selector: '[appShark]' }
      )
      export class SharkDirective {
        creature="Dolphin";
      
        constructor(elem: ElementRef, renderer: Renderer2) {
          let shark = renderer.createText('Shark ');
          renderer.appendChild(elem.nativeElement, shark);
        }
      }
      

      A continuación, añadiremos un Shark a Fin usándolo en la plantilla del componente:

      app.component.html

      <span appShark>Fin!</span>
      

      Cuando visualice la aplicación en un navegador, se mostrará como:

      Output

      Shark Fin!

      Ahora, podemos acceder a la variable de la instancia creature de SharkDirective y estableceremos una variable de instancia extraCreature con su valor:

      app.component.ts

      import {
        Component,
        ViewChild,
        AfterViewInit
      } from '@angular/core';
      import { SharkDirective } from './shark.directive';
      
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
      })
      export class AppComponent implements AfterViewInit {
        extraCreature: string;
      
        @ViewChild(SharkDirective)
        set appShark(directive: SharkDirective) {
          this.extraCreature = directive.creature;
        };
      
        ngAfterViewInit() {
          console.log(this.extraCreature); // Dolphin
        }
      }
      

      Usamos un regulador aquí para establecer la variable extraCreature. Observe que esperamos que el enlace de ciclo de vida AfterViewInit acceda a nuestra variable, ya que es aquí cuando los componentes y directivas secundarios están disponibles.

      Cuando se visualice la aplicación en un navegador, veremos el mensaje "Shark Fin!" (¡funcionó!). Sin embargo, en el registro de la consola, se mostrará lo siguiente:

      Output

      Dolphin

      El componente principal pudo acceder al valor de la directiva.

      Uso de ViewChild con elementos DOM

      ViewChild permite acceder a elementos DOM nativos que tienen una variable de referencia de plantilla.

      Digamos que tenemos un <input> en nuestra plantilla con la variable de referencia #someInput:

      app.component.html

      <input #someInput placeholder="Your favorite sea creature">
      

      Ahora podemos acceder a <input> con ViewChild y establecer el valor:

      app.component.ts

      import {
        Component,
        ViewChild,
        AfterViewInit,
        ElementRef
      } from '@angular/core';
      
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
      })
      export class AppComponent implements AfterViewInit {
        @ViewChild('someInput') someInput: ElementRef;
        ngAfterViewInit() {
          this.someInput.nativeElement.value="Whale!";
        }
      }
      

      Cuando ngAfterViewInit active el valor de nuestro <input> se establecerá a:

      Output

      Whale!

      El componente principal pudo establecer el valor del elemento DOM secundario.

      Usar ViewChild con componentes secundarios

      ViewChild hace que sea posible acceder a un componente secundario y a métodos de invocación o variables de instancia de acceso que están disponibles para el secundario.

      Digamos que tenemos un ChildComponent. Idealmente, usará @angular/cli para generar (generate) su componente:

      • ng generate component child --flat

      Si no es así, es posible que deba crear los archivos child.component.css y child.component.html y añadirlos manualmente a app.modul.ts:

      app.module.ts

      import { ChildComponent } from './child.component';
      ...
      @NgModule({
        declarations: [
          AppComponent,
          ChildComponent
        ],
        ...
      })
      

      Añadiremos un método whoAmI a ChildComponent, que devuelve un mensaje:

      child.component.ts

      whoAmI() {
        return 'I am a child component!';
      }
      

      A continuación, haremos referencia al componente en la plantilla de nuestra aplicación:

      app.component.html

      <app-child>child works!</app-child>
      

      Ahora podemos invocar el método whoAmI desde nuestra clase principal de componentes con ViewChild

      app.component.ts

      import {
        Component,
        ViewChild,
        AfterViewInit
      } from '@angular/core';
      import { ChildComponent } from './child.component';
      
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css'],
      })
      export class AppComponent implements AfterViewInit {
        @ViewChild(ChildComponent) child: ChildComponent;
        ngAfterViewInit() {
          console.log(this.child.whoAmI()); // I am a child component!
        }
      }
      

      Cuando se visualiza la aplicación en un navegador, el registro de la consola mostrará:

      Output

      I am a child component!

      El componente principal pudo invocar el método whoAmI del componente secundario.

      Conclusión

      Ha aprendido a usar ViewChild para acceder a una directiva, componente secundario y a un elemento DOM desde una clase principal de componentes.

      Si la referencia cambia a un nuevo elemento dinámicamente, ViewChild actualizará automáticamente su referencia.

      En los casos es los que desee acceder a múltiples secundarios, usará ViewChildren.

      Si desea obtener más información sobre Angular, consulte nuestra página sobre el tema Angular para ver ejercicios y proyectos de programación.



      Source link

      Comment utiliser ViewChild dans Angular pour accéder à un composant enfant, à une directive ou un élément DOM


      Introduction

      Dans cet article, vous allons vous expliquer ce qu’est un décorateur ViewChild d’Angular.

      Il se peut que dans certaines situations vous souhaitiez accéder à une directive, un composant enfant ou un élément DOM à partir d’une catégorie de composants parent. Le décorateur ViewChild renvoie le premier élément qui correspond à un sélecteur de référence de directive, de composant ou de modèle donné.

      Utilisation de ViewChild avec des directives

      ViewChild permet d’accéder aux directives.

      Supposons que nous ayons une SharkDirective.

      L’idéal serez que vous puissiez utiliser @angular/cli pour générer votre directive :

      • ng generate directive shark

      Ou alors, il vous faudra l’ajouter manuellement à app.module.ts :

      app.module.ts

      import { SharkDirective } from './shark.directive';
      ...
      @NgModule({
        declarations: [
          AppComponent,
          SharkDirective
        ],
        ...
      })
      

      Notre directive recherchera les éléments avec l’attribut appShark et ajoutera le texte dans l’élément avec le terme Shark :

      shark.directive.ts

      import {
        Directive,
        ElementRef,
        Renderer2
      } from '@angular/core';
      
      @Directive(
        { selector: '[appShark]' }
      )
      export class SharkDirective {
        creature="Dolphin";
      
        constructor(elem: ElementRef, renderer: Renderer2) {
          let shark = renderer.createText('Shark ');
          renderer.appendChild(elem.nativeElement, shark);
        }
      }
      

      Ensuite, nous allons ajouter un Shark à Fin en l’utilisant dans le modèle de composant :

      app.component.html

      <span appShark>Fin!</span>
      

      Lorsque vous visualiserez l’application dans un navigateur, l’affichage sera le suivant :

      Output

      Shark Fin!

      Maintenant, nous pouvons accéder à la variable d’instance creature de SharkDirective. Elle configurera une variable extraCreature avec sa valeur :

      app.component.ts

      import {
        Component,
        ViewChild,
        AfterViewInit
      } from '@angular/core';
      import { SharkDirective } from './shark.directive';
      
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
      })
      export class AppComponent implements AfterViewInit {
        extraCreature: string;
      
        @ViewChild(SharkDirective)
        set appShark(directive: SharkDirective) {
          this.extraCreature = directive.creature;
        };
      
        ngAfterViewInit() {
          console.log(this.extraCreature); // Dolphin
        }
      }
      

      Ici, nous avons utilisé une méthode de réglage pour configurer la variable extraCreature. Notez que nous attendons que le hook de cycle de vie AfterViewInit ait accès à notre variable, car c’est à ce moment-là que les composants et les directives enfant seront disponibles.

      Lorsque nous consultons l’application dans un navigateur, nous voyons encore apparaître "Shark Fin!" . Cependant, dans le journal de la console, il s’affichera de la manière suivante :

      Output

      Dolphin

      Le composant parent a pu accéder à la valeur depuis la directive.

      Utilisation de ViewChild avec les éléments DOM

      ViewChild permet d’accéder aux éléments DOM natifs qui ont une variable de référence de modèle.

      Supposons que nous ayons un <input> dans notre modèle avec la variable de référence #someInput :

      app.component.html

      <input #someInput placeholder="Your favorite sea creature">
      

      Maintenant, nous pouvons accéder à <input> avec ViewChild et configurer la value :

      app.component.ts

      import {
        Component,
        ViewChild,
        AfterViewInit,
        ElementRef
      } from '@angular/core';
      
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
      })
      export class AppComponent implements AfterViewInit {
        @ViewChild('someInput') someInput: ElementRef;
        ngAfterViewInit() {
          this.someInput.nativeElement.value="Whale!";
        }
      }
      

      Lorsque ngAfterViewInit se déclenche, la valeur de notre <input> sera configurée :

      Output

      Whale!

      Le composant parent a réussi à configurer la valeur de l’élément DOM enfant.

      Utilisation de ViewChild avec des composants enfant

      ViewChild permet d’accéder à un composant enfant et appeler des méthodes ou d’accéder à des variables d’instance qui sont disponibles pour l’enfant.

      Supposons que nous ayons un ChildComponent. L’idéal serez que vous puissiez utiliser @angular/cli pour générer votre composant :

      • ng generate component child --flat

      Ou alors, il vous faudra créer les fichiers child.component.css et child.component.html et l’ajouter manuellement à app.module.ts :

      app.module.ts

      import { ChildComponent } from './child.component';
      ...
      @NgModule({
        declarations: [
          AppComponent,
          ChildComponent
        ],
        ...
      })
      

      Nous allons ajouter une méthode whoAmI à ChildComponent qui renverra le message suivant :

      child.component.ts

      whoAmI() {
        return 'I am a child component!';
      }
      

      Ensuite, nous allons référencer le composant dans notre modèle d’application :

      app.component.html

      <app-child>child works!</app-child>
      

      Maintenant, nous pouvons appeler la méthode whoAmI de notre catégorie de composants parent avec ViewChild de la manière suivante :

      app.component.ts

      import {
        Component,
        ViewChild,
        AfterViewInit
      } from '@angular/core';
      import { ChildComponent } from './child.component';
      
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css'],
      })
      export class AppComponent implements AfterViewInit {
        @ViewChild(ChildComponent) child: ChildComponent;
        ngAfterViewInit() {
          console.log(this.child.whoAmI()); // I am a child component!
        }
      }
      

      Lorsque vous visualiserez l’application dans un navigateur, le journal de la console s’affichera :

      Output

      I am a child component!

      Le composant parent a réussi à appeler la méthode whoAmI du composant enfant.

      Conclusion

      Vous avez appris à utiliser ViewChild pour accéder à une directive, à un composant enfant et à un élément DOM dans une catégorie de composants parent.

      Si la référence est remplacée de manière dynamique par un nouvel élément, ViewChild mettra à jour automatiquement sa référence.

      Dans le cas où vous souhaitez accéder à plusieurs composants enfant, utilisez plutôt ViewChildren.

      Si vous souhaitez en savoir plus sur Angular, consultez notre page thématique Angular pour des exercices et des projets de programmation.



      Source link

      Como usar o ViewChild no Angular para acessar um componente filho, diretiva ou elemento DOM


      Introdução

      Este artigo irá apresentar-lhe o decorador ViewChild do Angular.

      Pode haver situações em que seja desejável acessar uma diretiva, componente filho ou um elemento DOM de uma classe de componentes pai. O decorador ViewChild retorna o primeiro elemento que corresponde a um determinado componente, diretiva ou seletor de referência modelo.

      O ViewChild torna possível acessar diretivas.

      Vamos supor que temos uma SharkDirective.

      Idealmente, você irá usar @angular/cli para generate (gerar) sua diretiva:

      • ng generate directive shark

      Caso contrário, pode ser necessário adicioná-la manualmente ao app.module.ts:

      app.module.ts

      import { SharkDirective } from './shark.directive';
      ...
      @NgModule({
        declarations: [
          AppComponent,
          SharkDirective
        ],
        ...
      })
      

      Nossa diretiva irá procurar elementos com o atributo appShark e anexar a palavra Shark no início do texto no elemento:

      shark.directive.ts

      import {
        Directive,
        ElementRef,
        Renderer2
      } from '@angular/core';
      
      @Directive(
        { selector: '[appShark]' }
      )
      export class SharkDirective {
        creature="Dolphin";
      
        constructor(elem: ElementRef, renderer: Renderer2) {
          let shark = renderer.createText('Shark ');
          renderer.appendChild(elem.nativeElement, shark);
        }
      }
      

      Em seguida, vamos adicionar um Shark em Fin usando ele no modelo de componente:

      app.component.html

      <span appShark>Fin!</span>
      

      Ao visualizar o aplicativo em um navegador, ele será exibido como:

      Output

      Shark Fin!

      Agora, vamos acessar a variável de instância creature de SharkDirective e definir uma variável de instância extraCreature com o seu valor:

      app.component.ts

      import {
        Component,
        ViewChild,
        AfterViewInit
      } from '@angular/core';
      import { SharkDirective } from './shark.directive';
      
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
      })
      export class AppComponent implements AfterViewInit {
        extraCreature: string;
      
        @ViewChild(SharkDirective)
        set appShark(directive: SharkDirective) {
          this.extraCreature = directive.creature;
        };
      
        ngAfterViewInit() {
          console.log(this.extraCreature); // Dolphin
        }
      }
      

      Usamos um setter aqui para definir a variável extraCreature. Observe que esperamos o gancho de ciclo de vida AfterViewInit acessar nossa variável, pois é neste momento em que os componentes filhos e diretivas ficam disponíveis.

      Ao visualizar o aplicativo em um navegador, ainda vamos ver o "Shark Fin!" como mensagem. No entanto, no registro do console, será exibido:

      Output

      Dolphin

      O componente pai foi capaz de acessar o valor da diretiva.

      O ViewChild torna possível acessar elementos DOM nativos que possuem uma variável de referência modelo.

      Vamos supor que temos um <input> em nosso modelo com a variável de referência #someInput:

      app.component.html

      <input #someInput placeholder="Your favorite sea creature">
      

      Agora, podemos acessar o <input> com o ViewChild e definir o value (valor):

      app.component.ts

      import {
        Component,
        ViewChild,
        AfterViewInit,
        ElementRef
      } from '@angular/core';
      
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
      })
      export class AppComponent implements AfterViewInit {
        @ViewChild('someInput') someInput: ElementRef;
        ngAfterViewInit() {
          this.someInput.nativeElement.value="Whale!";
        }
      }
      

      Quando o ngAfterViewInit disparar, o valor de nosso <input> será definido como:

      Output

      Whale!

      O componente pai foi capaz de definir o valor do elemento DOM filho.

      O ViewChild torna possível acessar um componente filho e chamar métodos ou acessar variáveis de instância que estão disponíveis para o filho.

      Vamos supor que temos um ChildComponent. Idealmente, você irá usar @angular/cli com a opção generate para criar seu componente:

      • ng generate component child --flat

      Caso contrário, pode ser necessário criar os arquivos child.component.css e child.component.html e adicioná-los manualmente ao app.module.ts:

      app.module.ts

      import { ChildComponent } from './child.component';
      ...
      @NgModule({
        declarations: [
          AppComponent,
          ChildComponent
        ],
        ...
      })
      

      Vamos adicionar um método whoAmI ao ChildComponent que retorna uma mensagem:

      child.component.ts

      whoAmI() {
        return 'I am a child component!';
      }
      

      Em seguida, vamos referenciar o componente em nosso modelo de aplicativo:

      app.component.html

      <app-child>child works!</app-child>
      

      Agora, chamamos o método whoAmI de dentro da nossa classe de componentes pai com o ViewChild, desta maneira:

      app.component.ts

      import {
        Component,
        ViewChild,
        AfterViewInit
      } from '@angular/core';
      import { ChildComponent } from './child.component';
      
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css'],
      })
      export class AppComponent implements AfterViewInit {
        @ViewChild(ChildComponent) child: ChildComponent;
        ngAfterViewInit() {
          console.log(this.child.whoAmI()); // I am a child component!
        }
      }
      

      Ao visualizar o aplicativo em um navegador, o registro do console irá exibir:

      Output

      I am a child component!

      O componente pai foi capaz de chamar o método whoAmI do componente filho.

      Conclusão

      Você aprendeu a usar o ViewChild para acessar um componente filho, diretiva e um elemento DOM de uma classe de componentes pai.

      Se a referência mudar dinamicamente para um novo elemento, o ViewChild irá atualizar sua referência automaticamente.

      Em casos em que você deseja acessar vários filhos, deve usar então o ViewChildren.

      Se você gostaria de aprender mais sobre o Angular, confira nossa página de tópico sobre Angular para exercícios e projetos de programação.



      Source link