Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/28.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
如何在Angular中共享对象?_Angular - Fatal编程技术网

如何在Angular中共享对象?

如何在Angular中共享对象?,angular,Angular,我有一个常量数组: export const gender = [{id: 1, name: "Male"}, {id: 2, name: "Female"}]; 如何跨组件共享此gender阵列?要填写模板中的选择列表?请创建一个数组,并将该数组作为属性放入服务中。然后,使用组件的构造函数,在要使用gender属性的每个组件中加载服务 @Injectable({providedIn:'root'}) 导出类MyService{ 公共只读性别=[{id:

我有一个常量数组:

export const gender = [{id: 1, name: "Male"}, {id: 2, name: "Female"}];
如何跨组件共享此
gender
阵列?要填写模板中的选择列表?

请创建一个数组,并将该数组作为属性放入服务中。然后,使用组件的构造函数,在要使用
gender
属性的每个组件中加载服务

@Injectable({providedIn:'root'})
导出类MyService{
公共只读性别=[{id:1,名称:“男性”},{id:2,名称:“女性”}];
公共地址性别(性别:任何){
这个。性别。推(性别)
}
}
@组件({
选择器:“app-component-1”,
模板:“添加其他性别”
})
导出类Component1实现OnInit{
公共构造函数(私有只读myService:myService){}
public ngOnInit(){console.log(this.myService.gender)}
公共关系(性别){
const id=this.myService.gender.length
this.myService.addGender({id,name:“Other”})
}
}
@组件({
选择器:“app-component-2”,
模板:`
    {{item.name}
` }) 导出类Component2实现OnInit{ 公共构造函数(公共只读myService:myService){} public ngOnInit(){console.log(this.myService.gender)} }
因为我们知道性别是有限的,而不是经常改变的,所以适合当前场景的最简单和最好的方法是在一个公共常量文件中添加性别,我们在其中定义应用程序的所有常量

常数。ts

export const gender = [{id: 1, name: "Male"}, {id: 2, name: "Female"}];
现在导入性别并在任何地方使用它

import { gender } form './constants';

gender = gender

console.log(this.gender)
或在模板中使用

<div *ngFor="let g of gender"> {{ g.id }} - {{ g.name }} </div>
{{g.id}-{{g.name}

在这种情况下,typescript常量就足够了

其他可能性:

environment.ts:但由于常量中有ID,它们在不同的环境中可能会有所不同。因此,您也可以将常量放入
环境/environment.ts
。见:

依赖注入:如果您需要更大的灵活性,还可以使用
注入令牌
注入它们。见:

从'@angular/core'导入{InjectionToken};
export const GENDERS=new InjectionToken('GENDERS');
@NGD模块({
...
供应商:[{
提供:性别,useValue:[{id:1,姓名:“男性”},{id:2,姓名:“女性”}];
}]
})
类组件{
构造函数(@Inject(GENDERS)public GENDERS:Gender[]){…}
}
通过依赖项注入,您还可以使用工厂在运行时配置阵列,或者通过在组件中定义自定义提供程序,为应用程序的一部分使用另一个阵列:

@组件({
提供者:{provide:GENDERS,useValue:[{id:3,name:“Rainbow”}]}
})
类MyComponent。。。。

将其放入一个文件中,向该文件添加一个导入引用file@j4rey这只会导致无法维护的代码。要修改阵列,您需要在组件中进行修改。因此,无论在何处引用数组,都必须在多个文件中维护它。使用一个服务,你只需要在一个文件中维护它。它不是一个可变的数据,创建一个服务是一种过火的行为。将其保存在类似constants.ts的文件中。任何需要它的组件或服务都可以通过
import{GENDER}from./constants'
简单地访问它。Overkill不需要,因为我们知道性别是有限的。这样添加不同性别有什么意义?我们可以用所有三种可能的性别简单地定义const,并且可以通过导入const在任何地方使用?如果你要与服务共享一个值,你真的应该使用rxjs。这种设置可能会导致许多奇怪且难以检测的bug。@KamranKhatti问题是关于在组件之间共享数据,这证明了这一点。仅仅因为性别没有改变并不意味着这适用于其他项目。@GetOfMyLawn与组件共享数据并不总是意味着有服务。还有其他可能的方式,如共享常量、枚举等。