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

至少有两种选择。 _device = await BluetoothDevice.FromBluetoothAddressAsync(decimalAddress); _device.ConnectionStatusChanged += OnDeviceConnectionStatusChanged;或如果此private void OnDeviceConnectionStatusChanged(BluetoothDevice sender, object args) { }组件是父级，则可以使用Subject and Observable。

another方法：

angular guide强烈建议您阅读整页。

某个组件

@Input

另一个组件

Subject and Observable

<强>服务

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

取自answer

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

angular guide

这非常简单，当您单击按钮@Injectable(); export class ClassService{ constructor() { } private someClassSource= new Subject<string>(); someClass$= this.someClassSource.asObservable(); changeClass(class) { this.someClassSource.next(class); } }时，@Input方法会更改changeClass elClass由another component装饰器传递给@Input将导致检测更改，检测到该值已更改，因此类将更改为@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; }（发送事件）angular guide

还可以与孩子进行家长互动

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

2 个答案: