Javascript Angular 4从另一个组件更改ngClass_Javascript_Angular

Javascript Angular 4从另一个组件更改ngClass

javascript angular

Javascript Angular 4从另一个组件更改ngClass,javascript,angular,Javascript,Angular,我当前在app.component.ts中有此代码 export class AppComponent { myclass: string; changeClass(myclass) { this.myclass = myclass; } } app.component.html <div [ngClass]="myclass"> ...rest of the content here </div> 现在，所有这些工作正常，但我现在想把

我当前在app.component.ts中有此代码

export class AppComponent {
  myclass: string;

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

}

app.component.html

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

现在，所有这些工作正常，但我现在想把触发按钮放在另一个组件上

如果我把它放在另一个组件上：

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

将类更改为myFavClass

我怎样才能让它改变课程？

有两种方法可以做到这一点

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

就我个人而言，我在这个实例中使用服务，因为它更容易管理代码及其流

这个答案包含了您需要查看的所有代码

希望这对你有所帮助有两种方法你可以使用

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

就我个人而言，我在这个实例中使用服务，因为它更容易管理代码及其流

这个答案包含了您需要查看的所有代码

希望这有帮助

至少有两种选择<代码>主题和可观察的，或者如果此

另一个

组件是父组件，则可以使用

@Input

受试者和可观察对象

方法：

强烈建议阅读整页

某些组件

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

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

另一个组件

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

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

服务

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

   private someClassSource= new Subject<string>();

   someClass$= this.someClassSource.asObservable();

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

另一个组件（必须是子组件）

other.component.html
另一个组件
导出类其他组件{
@Input（）元素类：字符串；
}

还可以通过

@Output

（发射事件）

进行子级到父级的交互。至少有两个选项<代码>主题和可观察的，或者如果此

另一个