Angular 8、checkbox的值可以传递给组件吗？不是 parent/child 关系

Question

<input type=checkbox [(ngModel)]="myCheckBox" (ngChanged)="!myCheckBox">

例如，如果我希望上面的代码将"checked"值传递给其他组件，即"true or false"，那么它的内容可以根据"myCheckBox" true | false，而且他们没有亲子关系，我有什么办法可以做到吗？请帮助，真的很感激！！！！

Answer 1

您可以通过不同的方法来实现它。例如：使用 EventEmitter 或 rxjs( Subject, BehaviourSubject);

在我的示例中，我是通过 BehaviourSubject 完成的。 stackblitz-link

Answer 2

是的，您可以使用 rxjs 和 BehaviourSubject

来实现此目的

您必须在复选框中输入一些值，然后 onchange 您必须调用一个函数来通知另一个组件中的订阅者。我正在为您编写一个非常基本的示例。

在你的sender.component.html中你可以这样做

<input type=checkbox [(ngModel)]="myCheckBox" (ngChanged)="!myCheckBox" (change)="notifyOtherComponent()">

然后在你的service.ts中你可以这样做

import { BehaviorSubject } from 'rxjs';

private messageSource = new BehaviorSubject('default message');
public currentMessageSubscriber = this.messageSource.asObservable();


notify(message: any) {
   this.messageSource.next(message)
}

在你的sender.component.ts中你可以这样做

  constructor(private __dataService : DataService){}

  notifyOtherComponent(){
   this.__dataService.notify({msg : 'do something'}) 
  }

并且在您的 listener.component.ts 中您可以订阅 BehaviourSubject 输入 Observable 来收听这样的最新值

constructor(private __dataService : DataService){}

ngOnInit() {
   this.__dataService.currentMessageSubscriber.subscribe((data : any)=>{
    console.log(data) // output : {msg : 'do something'}
  }) 
}

通过这种方式，您将从一个组件向 observable 发送数据，并将该数据监听到另一个组件。

Angular 8、checkbox的值可以传递给组件吗？不是 parent/child 关系

Angular 8, can checkbox value pass onto components? not not in a parent/child relation

checkbox

angular

angular6

angular7

angular8