Angular 2 - 合并（扩展）对象答案

【问题标题】：Angular 2 - Merging (extending) objectsAngular 2 - 合并（扩展）对象
【发布时间】：2016-07-22 21:56:38
【问题描述】：

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

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

但在 Angular 2 中显然什么都没有！

你有什么想法吗？

谢谢！

【问题讨论】：

标签： javascript angularjs angular

【解决方案1】：

Angular2 不提供这样的功能。

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

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

【讨论】：

小心使用 IE。根据 MDN，它不受支持。
安卓浏览器也不支持这个：kangax.github.io/compat-table/es6/…
如果您使用的是 Angular-CLI，请找到 poyfills.ts 并取消注释支持 IE9-11 的代码。

【解决方案2】：

在 Angular 中执行此操作的方法是使用 javascript 的 Object Spread 语法或 Object.assign()：

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

上述选项IE 本身不支持。
那么让我们看看在每种情况下会发生什么......

1。角 CLI

版本 8 及更高版本

在 Angular CLI 版本 8 及更高版本中，您无需执行任何其他操作。应用程序是使用差分加载构建的。这基本上意味着 Angular 将为旧版浏览器加载不同的 javascript 包，其中包括所有必要的 polyfill。 Read more about browser support.

旧版本

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

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

这将启用对象 polyfill，它为 Object.assign() 提供跨浏览器支持。

2。打字稿

如果您没有使用 Angular CLI，但您使用的是 Typescript 2.1 或更高版本，则无需执行任何其他操作。否则……

3。纯Javascript

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

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

另一个选项是 core-js npm package，Angular CLI 将其用于它的 polyfill。

一个simple polyfill来自Typescript转换成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;
};

最后，MDN polyfill。

【讨论】：

在构建时实现对象传播应该是确切的解决方案，因为大多数 Angular 2+ 用户都在使用 Typescript 构建应用程序。

【解决方案3】：

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

只需将其包含在您的 angular2/4 堆栈中即可。
这个问题解释了如何：Importing lodash into angular2 + typescript application

【讨论】：