Angular 2+视图访问JS原型方法及Angular 5调用全局构造函数的方案

我来帮你梳理这两个Angular视图相关的问题，结合实践给你一些可行的方案：

Angular的视图模板上下文默认绑定的是组件实例，能不能访问原型方法，得看具体场景：

• 如果是自定义对象实例的原型方法：
  只要组件里有这个对象的实例，直接在视图里通过实例调用方法就行。比如你给Array加了一个自定义原型方法：

  Array.prototype.doubleLength = function() {
    return this.length * 2;
  };
  

  组件里定义一个数组实例后，模板里直接调用：

  // 组件类
  export class MyComponent {
    numbers = [1, 2, 3];
  }
  

  <!-- 模板 -->
  <p>数组长度的两倍是：{{ numbers.doubleLength() }}</p>
  

  这是因为numbers作为Array的实例，已经继承了原型上的方法，视图可以直接访问实例的方法。

• 如果是全局内置对象的原型方法（比如Object.prototype、String.prototype）：
  这类方法没法直接在视图里通过构造函数调用（比如Object.prototype.toString.call(xxx)），因为全局构造函数不在组件的上下文里。这时推荐两种方式：

  1. 在组件里包装一个方法，内部调用原型方法，再在视图里调用这个组件方法：

     export class MyComponent {
       targetValue = { name: 'test' };
       
       getObjectType(value: any) {
         return Object.prototype.toString.call(value);
       }
     }
     

     <p>对象类型：{{ getObjectType(targetValue) }}</p>
     

  2. 把对应的全局构造函数绑定到组件属性（不推荐，因为耦合性高），比如Object = Object;，然后在视图里调用，但这种方式会让模板依赖全局环境，不利于组件测试和复用。

首先明确：默认情况下，Angular 5的视图不能直接访问Array、Object这类全局构造函数，因为它们不在组件的模板上下文里。你当前把Array绑定到组件属性的做法是可行的，但有更优雅的实现方式，按推荐度排序：

1. 封装组件方法（最推荐） #

不要直接暴露整个Array构造函数，而是把你需要的Array.from()功能封装成组件里的方法，这样更符合组件的封装原则，模板也更清晰：

export class MyComponent {
  dataSet = new Set([10, 20, 30]);
  
  convertToIterableArray(value: Iterable<any>) {
    return Array.from(value);
  }
}

<p>转换后的数组：{{ convertToIterableArray(dataSet) }}</p>

2. 简化全局构造函数绑定 #

如果一定要直接在模板里用Array.from()，可以简化你当前的写法，不用在构造函数里赋值，直接在组件类里声明属性：

export class MyComponent {
  dataSet = new Set([10, 20, 30]);
  Array = Array; // 直接绑定全局构造函数
}

<p>转换后的数组：{{ Array.from(dataSet) }}</p>

这种写法比构造函数赋值更简洁，但还是存在依赖全局环境的问题，适合简单场景。

3. 自定义管道（适合多组件复用） #

如果多个组件都需要用到Array.from()的转换功能，推荐封装一个自定义管道，复用性更强：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'arrayFrom' })
export class ArrayFromPipe implements PipeTransform {
  transform(value: Iterable<any>): any[] {
    return Array.from(value);
  }
}

记得在模块中声明这个管道，然后在模板里使用：

<p>转换后的数组：{{ dataSet | arrayFrom }}</p>

这种方式让转换逻辑独立，方便在多个组件中复用，也便于后续修改和维护。

内容的提问来源于stack exchange，提问作者amy8374