Angular 2 - 合并(扩展)对象

Posted

技术标签:

【中文标题】Angular 2 - 合并(扩展)对象【英文标题】:Angular 2 - Merging (extending) objects 【发布时间】: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 中显然什么都没有!

你有什么想法吗?

谢谢!

【问题讨论】:

【参考方案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

【讨论】:

以上是关于Angular 2 - 合并(扩展)对象的主要内容,如果未能解决你的问题,请参考以下文章

Angular2 HTTP GET - 将响应转换为完整对象

我可以在 angular + ngrx 中使用对象扩展语法吗?

angular模块详解

Angular 2:变量名是啥?意思是?

.net core SPA Angular中的脚手架管理员CRUD

如果第二个数组的项目包含数组的第一个对象的 id,则合并 Angular 8 中的两个对象数组