web-dev-qa-db-fra.com

Angular 6 - Masquer ou afficher un composant Div déclenché depuis un service

J'ai un service qui a une méthode qui fait quelque chose.

service.ts:

doSomething() {
    // Does something here
}

Ce service parle avec le composant ci-dessous:

myComponent.ts

J'ai: myComponent.html qui a un div:

<div class="myDiv">Something Here</div>

Ce que je veux, c'est afficher et masquer le div par code dans la méthode doSomething () du service.

Comme ça:

doSomething() {

    1. Show myDiv   
    2. // Do something here
    3. Hide myDiv
}

Comment puis-je faire ceci?

angulartypescriptangular6
6
Craig2018

En particulier, j'insère dans la méthode doSomething () l'ensemble d'une valeur d'indicateur pour contrôler la div.

COMPOSANT 

doSomething() {
  service
    .doSomething()
    .subscribe(
       r => {
          this.show = true;   
          2. // Do something here
          this.show = false;  
       }
    );
}

<div *ngIf="show" class="myDiv">Something Here</div>

Mais ce code doit rester dans le composant et non dans le service.

7
Antonio de la mata

Ajoutez l'attribut ngIf au balisage:

*ngIf="IAmDoingSomething"

Dans le composant, vous pouvez effectuer les opérations suivantes:

export class MyDoSomethingComponent{
public IAmDoingSomething = false;
...
   invokeServices = async  () => {
       this.IAmDoingSomething = true;
       await doSomething();
       this.IAmDoingSomething = false;
    }
...
}
4
garty