首页 > 其他 > 详细

angular里forwardRef的原理

时间:2020-12-10 13:22:51      阅读:46      评论:0      收藏:0      [点我收藏+]

一段会报错的angular代码

@Injectable()
class Socket {
  constructor(private buffer: Buffer) { }
}

console.log(Buffer); // undefined

@Injectable()
class Buffer {
  constructor(@Inject(BUFFER_SIZE) private size: Number) { }
}

console.log(Buffer); // [Function: Buffer]

翻译一下

    var providerList = new Map();
    function Injectable(cls, deps) {
      providerList.set(cls, {
        deps: deps,
        instance: null
      });
    }

    function inject(cls) {
      var instanceObj = providerList.get(cls);
      if (instanceObj === undefined) {
        return null;
      } else if (instanceObj.instance === null) {
        var deps = instanceObj.deps.map(dep => inject(dep));
        var instance = cls.apply({}, deps);
        instanceObj.instance = instance;
        return instance;
      } else {
        return instanceObj.instance;
      }
    }

    var Socket = (function() {
      function Socket(buffer) {
        this.buffer = buffer;
        return this;
      }
      Injectable(Socket, [Buffer]);
      return Socket;
    }());

    var Buffer = (function () {
      function Buffer() {
        this.sayHello = function() {
          console.log(‘hello, i am Buffer.‘);
        }
        return this;
      }
      Injectable(Buffer, []);
      return Buffer;
    }());

    var socket = inject(Socket);
    socket.buffer.sayHello();
Socket被注入的时候,他的依赖Buffer还是undefined状态,最后取出来的就是undefined.
看看angular怎么用forwardRef解决这个问题的
@Injectable()
class Socket {
  constructor(@Inject(forwardRef(() => Buffer) private buffer) { }
}

@Injectable()
class Buffer {
  constructor() { }
}

翻译一下

    function forwardRef(forwardRefFn) {
      forwardRefFn.__forward_ref__ = forwardRef;
      return forwardRefFn;
    }

    function resolveForwardRef(type) {
      if (typeof type === ‘function‘ && type.hasOwnProperty(‘__forward_ref__‘) && type.__forward_ref__ === forwardRef) {
        return type();
      } else {
        return type;
      }
    }

    var providerList = new Map();

    function Injectable(cls, deps) {
      providerList.set(cls, {
        deps: deps,
        instance: null
      });
    }

    function inject(cls) {
      cls = resolveForwardRef(cls);
      var instanceObj = providerList.get(cls);
      if (instanceObj === undefined) {
        return null;
      } else if (instanceObj.instance === null) {
        var deps = instanceObj.deps.map(dep => inject(dep));
        var instance = cls.apply({}, deps);
        instanceObj.instance = instance;
        return instance;
      } else {
        return instanceObj.instance;
      }
    }

    var Socket = (function() {
      function Socket(buffer) {
        this.buffer = buffer;
        return this;
      }
      Injectable(Socket, [forwardRef(() => Buffer)]);
      return Socket;
    }());

    var Buffer = (function () {
      function Buffer() {
        this.sayHello = function() {
          console.log(‘hello, i am Buffer.‘);
        }
        return this;
      }
      Injectable(Buffer, []);
      return Buffer;
    }());

    var socket = inject(Socket);
    socket.buffer.sayHello();

原理就是依赖不再是类了,而是一个返回类的函数,这样在inject的时候避免注入undefined。

angular里forwardRef的原理

原文:https://www.cnblogs.com/chen8840/p/14113283.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!