8
votes

Classe de basculement conditionnellement en angulaire 2

Je dois basculer une classe "active" sur ONI en composant lorsque un bouton "App-en-tête" est cliqué. Voici mon app-composent.html, xxx

app-header.html xxx

Comment puis-je faire cela en utilisant uniquement l'angulaire depuis le Div et les boutons sont dans 2 composants différents ???? S'il vous plaît aide je suis nouveau à angulaire !!!

angular html

0 commentaires

3 Réponses :

2
votes

Vous pouvez créer un service commun et stocker une variable comme public, exemple: xxx pré>

puis utilisez la variable dans les deux composants en tant que variable partagée, exemple: P>

@Component({...})
export class FooComponent{
    constructor(private dataService:DataService){}

    foo():void{
        console.log(this.dataService.foo);
    }
}

1 commentaires

Bien que cela puisse être un indice précieux pour résoudre le problème, une bonne réponse démontre également la solution. S'il vous plaît Modifier pour fournir un code d'exemple pour montrer ce que vous voulez dire. Alternativement, envisagez d'écrire cela comme un commentaire à la place.

6
votes

Vous pouvez lier votre objet à la directive [ngclass]: xxx

pour partager des données entre les composants, voir cette réponse: HTTTPS://Stackoverflow.com/a/45371025/1791913

0 commentaires

5
votes

Vous pouvez utiliser EventMitter .

App-Header.html P> xxx pré>

app-header.ts p> xxx pré>

app-composent.html p> xxx pré>

App-composant.TS P>

  active:boolean=false;    
    constructor(){
    }
    ngOnInit(){
    }
   toggleActive($event){
    // Insert click event handling here
   }

5 commentaires

Vous manquez certaines citations, votre exemple actuel n'est pas une syntaxe de modèle angulaire valide.

Existe-t-il un moyen d'écouter cet événement dans App-composent.ts ???

@Laoujin Désolé Iv'e a ajouté les devis.

@ Mr.GAJA Oui Vous pouvez, iv'e Modifier ma réponse et ajouté la fonction Toggleactive (). J'espère que ça aide..

@Output () doit être ajouté à l'application App-Header.TS, @Output () _Clickevent: EventMitter = nouveau Ecompressemitter ();