javascript - Angular - 调用另一个组件函数来切换 div 的显示

Question

我有两个组件，一个是我的标题，一个现在只是纯文本。

在标题上有一个选择选项的菜单。当在标题上单击其中一个选项时，我想在另一个组件中切换一个 bool 值并显示整个 html。

如何从标题菜单中的 onClick() 执行此操作？

控制台提示我尝试调用的函数未定义。

//this is in one folder...

export class EducationComponent {

 showEducation: boolean = true;

 toggleEducation () {
 this.showEducation = !this.showEducation;
  }
}

//this is is a different folder...

<li><a (click)="toggleEducation()">Education</a></li>

Answer 1

组件类的目的是提供组件模板所需的属性和方法。因此模板将查看其关联类以查找属性和方法。

如果您需要在多个组件之间共享属性或方法，请改用 Angular 服务。

我在这里有一篇关于 Angular 服务的博文:https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

代码基本上是这样的:

import { Injectable } from '@angular/core';

@Injectable() 
export class DataService {
  serviceData: string; 
}

在您的情况下，serviceData 将是 bool 值而不是字符串。

一个组件可以设置值，另一个组件可以绑定(bind)到它。

如果你想尝试一下，我在插件中也有这段代码:https://plnkr.co/edit/KT4JLmpcwGBM2xdZQeI9?p=preview