Question

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

标签顶部保留了全局搜索过滤器和编辑图标。

要使组件的编辑模式包含每个组件中的modeEdit变量，如何更新相应的组件变量，我们如何才能将搜索文件管理器用于相应的组件数据变量？

以下代码可在大约7个组件中使用，

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

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

Answer 1

创建服务并使用Angular模块而不是组件注册服务。

@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();
    }
}

来自Angular docs

Angular模块提供程序(@NgModule.providers)已注册   应用程序的根注入器。 Angular可以注入相应的   它创建的任何类中的服务。一旦创建，就是一个服务实例   为应用程序的生命而活，Angular注入了这一项服务   每个需要它的类中的实例。

总结

如果您希望全局共享依赖关系的实例并在整个应用程序中共享state，请在NgModule.（Singleton）

上配置它

如果希望在组件的每个实例之间共享一个独立的依赖项实例，并且它的子组件在组件providers属性上进行配置。

Answer 2

您也可以使用行为主题

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
    }
}

2）您可以在任何组件或服务中订阅此值。

ngOnInit() {
    this.myService.showEdit.subscribe(val => {
        this.showEdit = val;
    });
}

3）改变你的价值

this.myService.changeEditMode();

Answer 3

利用继承！

// 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();
   }
}

Answer 4

您是否尝试过创建服务？服务是单一的，带有简单的模块声明。

Answer 5

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

创建服务： ng g s SystemSettings

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

＆＃13;

public GlobalSearch: string = "";
pubilc APIUrl: stirng = "";

＆＃13;

比任何组件导入服务

＆＃13;

import { SystemSettings } from '../../SystemSettings';

＆＃13;

并在构造函数

中

＆＃13;

constructor(public/private systemSettings: SystemSettings)

＆＃13;

如何在所有组件中重用公共变量名称和函数

5 个答案: