Angular 角度8，复选框值可以传递到组件上吗？不在父/子关系中

例如，如果我想让上面的代码将“checked”值（即“true或false”）传递给其他组件，那么它的内容可以基于“myCheckBox”true | false作出反应，并且它们不存在父子关系，我有什么办法可以做到这一点吗？请帮忙，真的很感激

您可以通过不同的方法来实现它。例如：使用EventEmitter或rxjs（主题、行为主题）

在我的例子中，我通过行为学科目完成了。

---

是的，您可以使用

rxjs

和

behavioussubject

您必须在复选框中输入一些值，然后

onchange

您必须调用一个函数来通知另一个组件中的订户。我正在为你们写一个非常基本的例子

在

sender.component.html

中，您可以这样做

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

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

import { BehaviorSubject } from 'rxjs';

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


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

  constructor(private __dataService : DataService){}

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

在您的

sender.component.ts

中，您可以这样做

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

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

import { BehaviorSubject } from 'rxjs';

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


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

  constructor(private __dataService : DataService){}

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

在您的listener.component.ts中，您可以订阅

behavior subject

type

observeable

来收听这样的最新值

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

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

import { BehaviorSubject } from 'rxjs';

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


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

  constructor(private __dataService : DataService){}

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

---

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

如果应用程序中同时存在这两个组件，请检查