Javascript Angular 2 - 合并(扩展)对象

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/36384351/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 18:59:00  来源:igfitidea点击:

Angular 2 - Merging (extending) objects

javascriptangularjsangular

提问by tadaa9

How to merge 2 objects with Angular 2?

如何将 2 个对象与 Angular 2 合并?

In AngularJS 1 we have the "merge" and "extend" functions: https://docs.angularjs.org/api/ng/function/angular.mergehttps://docs.angularjs.org/api/ng/function/angular.extend

在 AngularJS 1 中,我们有“合并”和“扩展”功能:https: //docs.angularjs.org/api/ng/function/angular.merge https://docs.angularjs.org/api/ng/function/ angular.extend

But apparently nothing in Angular 2!

但显然 Angular 2 中什么都没有!

Do you have an idea?

你有想法吗?

Thanks!

谢谢!

回答by Günter Z?chbauer

Angular2 doesn't provide anything like this.

Angular2 没有提供这样的东西。

You can use for example Object.assign()

您可以使用例如Object.assign()

Object.assign(target, source_1, ..., source_n)

回答by m.spyratos

The way to do it in Angular is with javascript's Object Spreadsyntax or Object.assign():

在 Angular 中这样做的方法是使用 javascript 的Object Spread语法或Object.assign()

const obj = {...object1, ...object2}; // or
const obj = Object.assign({}, object1, object2);

The above options are not supported by IEnatively.
So let's see what happens in each scenario...

IE本身不支持上述选项。
那么让我们看看在每个场景中会发生什么......

 

 

1. Angular CLI

1. Angular CLI

Version 8 and higher

版本 8 及更高版本

In Angular CLI version 8 and higher, you don't need to take any additional actions. Applications are built using differential loading. This basically means that Angular will load a different javascript bundle for older browsers, which includes all the necessary polyfills. Read more about browser support.

在 Angular CLI 版本 8 及更高版本中,您无需执行任何其他操作。应用程序是使用差分加载构建的。这基本上意味着 Angular 将为旧浏览器加载不同的 javascript 包,其中包括所有必要的 polyfill。阅读有关浏览器支持的更多信息

Older versions

旧版本

If you are using older versions of the Angular CLI with a Typescript version less than 2.1 (quite old), then open /src/polyfills.tsand uncomment the following line:

如果您使用的 Angular CLI 的 Typescript 版本低于 2.1(相当旧),请打开/src/polyfills.ts并取消注释以下行:

// import 'core-js/es6/object';

This will enable the Object polyfill which provides cross browser support for Object.assign().

这将启用为Object.assign().

 

 

2. Typescript

2.打字稿

If you did not use Angular CLI, but you are using Typescript version 2.1 or greater, then you don't have to take any additional actions. Otherwise...

如果您没有使用 Angular CLI,但您使用的是 Typescript 2.1 或更高版本,那么您无需采取任何其他操作。除此以外...

 

 

3. Plain Javascript

3. 纯 Javascript

If you don't use Angular CLI or Typescript, then you can just import a polyfill into your project. There are plenty out there and here are a few ones:

如果您不使用 Angular CLI 或 Typescript,那么您只需将一个 polyfill 导入您的项目即可。那里有很多,这里有一些:



Babelis a good option. You can use any of the Object.assign()and Object Spreadpolyfill plugins.

Babel是一个不错的选择。您可以使用任何Object.assign()Object Spreadpolyfill 插件。



Another options is core-js npm packagethat Angular CLI uses for its polyfills.

另一个选项是Angular CLI 用于其 polyfill 的core-js npm 包



A simple polyfillfrom Typescript's conversion into javascript:

一个简单的填充工具从打字稿的转换为JavaScript:

Object.assign = Object.assign || function(t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
        s = arguments[i];
        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
            t[p] = s[p];
    }
    return t;
};


And lastly, the MDN polyfill.

最后,MDN polyfill

回答by James Earlywine

You can use underscore/lodash library. https://lodash.com/docs#merge

您可以使用下划线/lodash 库。 https://lodash.com/docs#merge

Just include it in your angular2/4 stack.
This question explains how: Importing lodash into angular2 + typescript application

只需将它包含在您的 angular2/4 堆栈中。
这个问题解释了如何:将 lodash 导入 angular2 + typescript 应用程序