Angular 如何在所有组件中重用通用变量名和函数

使用显示组件的选项卡，每个组件将有一个数据网格来显示各种数据

选项卡顶部保留全局搜索过滤器和编辑图标

要使组件的编辑模式装箱到每个组件中的MODEDIT变量，我如何更新相应的组件变量？我们如何使用搜索文件管理器更新相应的组件数据变量

以下代码在大约7个组件中提供

showEdit() {
    if (this.showedit === true) {
      this.showedit = false;
    } else {
      this.showedit = true;
    }
    return this.showedit;
  }

---

组件数据网格数据在此.info中可用，我们如何使用变量的全局搜索。

是否尝试创建服务？服务是带有简单模块声明的单音。

利用继承

// making it abstract so that BaseComponent cannot be used solely
export abstract class BaseComponent {
  showedit: boolean;
  showEdit() {
    if (this.showedit === true) {
      this.showedit = false;
    } else {
      this.showedit = true;
    }
    return this.showedit;
  }
}

现在在组件中

@Component({...})
export class ComponentOne extends BaseComponent {
   // base methods will be available!
   method() {
      this.showEdit();
   }
}

---

创建服务，并使用角度模块而不是组件注册服务

@NgModule({
  declarations: [ AppComponent,],
  imports: [BrowserModule,],
  providers: [SharedService],

您的服务

export class SharedService {
    showEdit() {
        this.showedit =!this.showedit;
        return this.showedit;
    }
}

将其注入组件并使用

export class AppComponent implements OnInit {

    constructor(private service: SharedService) {} 

    public data;

    ngOnInit() {
        this.data=this.service.showEdit();
    }
}

从

角度模块提供程序

（@NgModule.providers）

在 应用程序的根注入器。Angular可以注入相应的 它创建的任何类中的服务。一旦创建，服务实例 为应用程序的生命而活，Angular注入了这一项服务 在每一个需要它的类中

总结

export class SharedService {
    showEdit() {
        this.showedit =!this.showedit;
        return this.showedit;
    }
}

如果希望在应用程序中全局共享依赖项实例并共享

状态

，请在

NgModule上对其进行配置。

（Singleton）

---

如果您希望在组件的每个实例及其子实例之间共享一个独立的依赖实例，请在components

providers

属性上对其进行配置。

您可以创建一个可在项目中任何位置使用的服务

创建服务：ng g s系统设置

在服务中，您可以使用以下变量：

public GlobalSearch:string=“”；
公共APIUrl:stirng=“”您也可以使用行为主题

1） 创建服务

import {Injectable} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {BehaviorSubject, Subject} from 'rxjs/Rx';

@Injectable()
export class MyService {
    public _showEdit: BehaviorSubject<boolean> = new BehaviorSubject(false);
    public showEdit: Observable<boolean> = this._showEdit.asObservable();

    changeEditMode(): void {
        const newEditMode = !this._showEdit.getValue();
        this._showedit.next(newEditMode); // <-- save new value
    }
}

3） 改变你的价值

this.myService.changeEditMode();

服务将与所有组件通信，不是吗？如果我使用服务，我希望所有组件都会进入编辑模式。不，不会工作。因为这将是单身汉。一个组件中值的更改将对所有组件进行更改。如果在组件配置中声明服务，则每个组件中都将有一个新的服务实例。您的
showEdit（）
没有完全传达它所做的切换标志的功能。也许更好的方法名是
toggleEdit（）
。任何组件之间都没有关系。那又怎样？不会有任何问题的。在所有6-7组件中扩展
BaseComponent
。方法将可用。按钮将在选项卡组件中，但变量将在网格组件中使用，扩展选项卡组件将如何更新网格组件。根据我的理解，遗产是从上到下的。如果你不分享你的完整代码，怎么会有人知道呢？了解如何创建