Javascript Angular 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

有兩種方法可以將輸出與EventEmit一起使用

或者，您可以設置服務來監視變量的更改，並將其用作更改的控制點。

就個人而言，我將服務用於此實例，因為它更易於管理代碼及其流程。

該答案包含您需要查看的所有代碼。

同時更改兩個不同組件中的值Angular 2

希望能有所幫助

Answer 2

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

Subject and Observable方法：

角度指南強烈建議閱讀整頁。

一些組成部分

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

取自我的答案

@Input法：

角向導

這非常簡單，當您單擊按鈕changeClass方法將更改elClass ， elClass將通過@Input裝飾器傳遞給another component ， @Input每次更改@Input將導致檢測更改，該更改將檢測到該值已更改，因此class將更改為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 （發射事件） 角度向導進行子對父交互