Question

我有一个导航栏和一个“创建课程”页面。我有两个组件：CourseComponent和NavbarComponent。

我的问题是，当我进入“创建课程页面”时，导航栏组件将添加一个按钮-“课程保存”，当我单击该按钮时，它将保存我编辑过的课程。我使用JhiEventManager的{{1}}交换信息。这是我的代码：

navbar-component

broadcast

navbar-component

import { JhiEventManager } from 'ng-jhipster';

@Component({
  selector: 'jhi-course',
  templateUrl: './course.component.html',
  styleUrls: ['course.css']
})
export class CourseComponent implements OnInit, AfterViewInit {
  constructor(private eventManager: JhiEventManager) {}
  ngOnInit() {
    this.eventManager.subscribe('COURSE_SAVE_EVENT', msg => {
      console.log('braodcast:  ', msg);
      if (msg.saveCourse) {
        this.saveCourse();
      }
    });
  }

  saveCourse() {
    alert('save course');
  }
}

但是！！！！当我三次进入课程页面并单击“保存课程”按钮时，它将执行三次保存操作！我只希望它可以一次保存数据，该怎么办？

Answer 1

您可以使用服务或输入/输出装饰器在同一级别的应用内部的组件之间进行父子之间的通信，反之亦然。

定义服务并将其导入到您的.ts文件中，然后在其他组件中设置要检索的数据，然后再次导入服务并获取数据。

在第一部分中：

this.eventManager.subscribe('COURSE_SAVE_EVENT', msg => {
      console.log('braodcast:  ', msg);
      if (msg.saveCourse) {
       this.serviceReference.setDta("courseMsg" , msg);
        this.saveCourse();
      }
    });

在第二个组件中使用this.serviceReference.getData（）

并且在使用中当然要写setdata和getDta函数。

使用INPUT的第二种方式

< app-messagecomponent [YourInputVariableName]= "YourMessage" >< /app-messagecomponent>

在app.comnent write中

YourMessage:any='my Message to be displayed in the messageComponent';

在app-message.component中写入

@Input YourInputVariableName:any;

您可以通过app-messagecomponent在this.YourInputVariableName中打印消息

Answer 2

问题在于，当组件被销毁时，对eventManager的订阅仍处于活动状态。

您可以使用rxjs中的takeUntil运算符。这样，您就不必取消订阅。

    import { takeUntil } from 'rxjs/operators';
    import { Subject } from 'rxjs';

    export class CourseComponent implements OnInit, OnDestroy {

       private destroy$ = new Subject<void>();

       ngOnInit() {
            this.eventManager.observable.pipe(
                takeUntil(this.destroy$))
                .subscribe('COURSE_SAVE_EVENT', msg => {
                   console.log('braodcast:  ', msg);
                   if (msg.saveCourse) {
                      this.saveCourse();
                }});
        }

        saveCourse(){
           alert('save course');
        }

        ngOnDestroy() {
           this.destroy$.next();
           this.destroy$.complete();
        }
      }

如何在两个相同级别的组件之间发送消息？

2 个答案: