從另一個組件的Javascript角4更改ngClass

Question

目前，我有這個代碼在我app.component.ts

app.component.html

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

這我有這樣的：

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

app.component.ts

export class AppComponent { 
    myclass: string; 

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

} 

現在，所有這些工作正常，但我現在想把觸發按鈕放在另一個組件上。

如果我把這個在另一個組件上：

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

我怎樣才能得到它更改類？

Answer 1

至少有兩個選項。 Subject and Observable或者如果此another組件是父級，則可以使用@Input。

Subject and Observable方法：

angular guide強烈推薦閱讀整個頁面。

一些部件

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

另一組件

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(); 
    } 
} 

服務取自

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

    private someClassSource= new Subject<string>(); 

    someClass$= this.someClassSource.asObservable(); 

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

我answer

@Input方法：

angular guide

這是非常簡單的，當你點擊按鈕changeClass方法將改變elClass將由@Input裝飾傳遞給another component的@Input每一個變化都會導致檢測將會檢測到該值已更改的更改，所以班級將更改爲myClass。

父組件

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; 
    } 
} 

另一個組件（必須是子組件）

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

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

還有通過@Output（發光事件）的孩子家長互動angular guide

Answer 2

有兩種方法可以做到這一點，你可以使用output with an EventEmit

或者，你可以設置一個監控變爲變量的服務，並以此作爲對變化的控制點。

就我個人而言，我使用這個實例的服務，因爲它更容易管理代碼和流。

這個答案有你需要看的所有代碼。

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

希望幫助