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 中使用对象扩展语法吗?