angular里forwardRef的原理
2024-10-20 20:36:01
一段会报错的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。
最新文章
- 再讲IQueryable<T>，揭开表达式树的神秘面纱
- JavaScript字符串排序localeCompare()笔记
- test 2016-12-6
- Servlet学习一
- Sql Server 2008 无法启动T-Sql调试问题的解决方案
- JavaScript上传图片及时预览
- Spring事务解析1-使用介绍
- PHP 教程
- sublime text 3安装package console
- Dedecms include\dialog\select_soft_post.php Upload Any Files To The Specified Directory Via Variable Not Initial Flaw Bypass Extension Defence
- ICE中间件说明文档
- 慕课网-安卓工程师初养成-4-4 Java条件语句之嵌套 if
- Python实现ssh批量登录并执行命令
- 找回丢失的SQL Server性能计数器
- iOS-学习路线图(推荐)
- python的私有变量解析
- c++ string 对象操作
- vmWare pro 14.1.1+ubuntu-desktop-amd64的总体安装流程
- 重建二叉树（JAVA）
- org.springframework.jdbc.UncategorizedSQLException