Javascript angulaire 4 Changement ngClass d'un autre composant

Question

J'ai actuellement ce code dans mes app.component.ts

app.component.html

<div [ngClass]="myclass"> 
    ...rest of the content here 
</div> 

Ce que j'ai la suivante:

<button (click)="changeClass('myFavClass')">Change Class to myFavClass</div> 

app.component.ts

export class AppComponent { 
    myclass: string; 

    changeClass(myclass) { 
    this.myclass = myclass; 
    } 

} 

Maintenant, tout cela fonctionne bien MAIS je veux maintenant mettre le bouton de déclenchement sur un autre composant.

Si je mets cela sur un autre composant:

<button (click)="changeClass('myFavClass')">Change Class to myFavClass</div> 

Comment puis-je obtenir pour changer la classe?

Answer 1

Il y a au moins deux options. Subject and Observable ou si ce composant another est un parent, vous pouvez utiliser .

méthode Subject and Observable:

angular guide Hautement recommandé de lire la page entière.

Certains composants

export class SomeComponent { 
    constructor(private ClassService: ClassService) { } 
    private changeClass(class) { 
     this.ClassService.changeClass(class); 
    } 
} 

Une autre composante

export class AnotherComponent implements OnInit, OnDestroy { 
    constructor(private ClassService: ClassService) { } 
    private class: string = ""; 
    private subscribtion: Subscribtion; 
    ngOnInit(): void { 
     this.Subscribtion = this.ClassService.someClass$.subscribe(
     (class) => { this.class = class; } 
    ) 
    } 
    ngOnDestroy(): void { 
     this.Subscribtion.unsubscribe(); 
    } 
} 

service

@Injectable(); 
export class ClassService{ 
    constructor() { } 

    private someClassSource= new Subject<string>(); 

    someClass$= this.someClassSource.asObservable(); 

    changeClass(class) { 
     this.someClassSource.next(class); 
    } 
} 

pris de mon answer

méthode @Input:

angular guide

Ceci est très simple, lorsque vous cliquez sur le bouton méthode changeClass changera elClass qui sera passé à another component par @Input décorateur, chaque changement de @Input provoquera une détection les modifications qui vont détecter cette valeur ont changé, donc la classe passera à myClass.

composant parent

parent.component.html 
<another-component [elementClass]="elClass"></another-component> 
<button (click)="changeClass('myClass')">change class<button> 

parent.component.ts 
export class ParentComponnet { 
    private elClass: string = ""; 
    changeClass(class: string) { 
     elClass = class; 
    } 
} 

Un autre composant (doit être composant enfant)

another.component.html 
<div [ngClass]="elementClass"> 

another.component.ts 
export class AnotherComponent { 
    @Input() elementClass: string; 
} 

Il y a aussi des enfants à l'interaction des parents par l'intermédiaire @Output (événement émettant) angular guide

Answer 2

Il y a deux façons que vous pouvez faire cela, vous pouvez utiliser output with an EventEmit

Ou vous pouvez mettre en place un service qui surveille les modifications apportées à une variable et l'utiliser comme point de contrôle pour le changement.

Personnellement, j'utilise des services pour cette instance car il est plus facile de gérer le code et son flux.

Cette réponse a tout le code dont vous avez besoin de regarder.

Changing a value in two different components at the same time Angular 2

espoir qui aide