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

有两种方法可以做到这一点，你可以使用output with an EventEmit

或者您可以设置一个服务来监控变量的更改并将其用作更改的控制点。

就我个人而言，我为此实例使用服务是因为它更易于管理代码及其流程。

此答案包含您需要查看的所有代码。

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

希望有帮助

Answer 2

至少有两种选择。 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 实现 Child 与 Parent 的交互