查找Component源代码的最快方法？

Question

我想阅读Component的源代码或Angular 2的任何类或接口的源代码。在core / src目录中有很多子目录;找到它有快速而合理的方法吗？

Answer 1

事实上，Angular2提供了“索引”模块来将子模块收集到单个大模块中（它们重新导出它们）。我首先看看它们，这样你就可以看到它们来自哪些子模块。

以下是一个示例：

import {Injectable} from '@angular/core';

首先看看modules/@angular/core/index.ts。由于Injectable与依赖注入有关，./src/di应匹配：

export * from './src/metadata';
export * from './src/util';
export * from './src/di'; // <----
export {createPlatform, assertPlatform, disposePlatform, getPlatform, coreBootstrap, coreLoadAndBootstrap, createNgZone, PlatformRef, ApplicationRef, enableProdMode, lockRunMode, isDevMode} from './src/application_ref';
export {APP_ID, APP_INITIALIZER, PACKAGE_ROOT_URL, PLATFORM_INITIALIZER} from './src/application_tokens';

然后，您可以查看modules/@angular/core/src/di.ts。由于Injectable是装饰器，./di/decorators应匹配：

export {HostMetadata, InjectMetadata, InjectableMetadata, OptionalMetadata, SelfMetadata, SkipSelfMetadata} from './di/metadata';

export * from './di/decorators'; // <------

export {forwardRef, resolveForwardRef, ForwardRefFn} from './di/forward_ref';

export {Injector} from './di/injector';
export {ReflectiveInjector} from './di/reflective_injector';
export {Binding, ProviderBuilder, bind, Provider, provide} from './di/provider';
export {ResolvedReflectiveBinding, ResolvedReflectiveFactory, ResolvedReflectiveProvider} from './di/reflective_provider';
export {ReflectiveKey} from './di/reflective_key';
export {NoProviderError, AbstractProviderError, CyclicDependencyError, InstantiationError, InvalidProviderError, NoAnnotationError, OutOfBoundsError} from './di/reflective_exceptions';
export {OpaqueToken} from './di/opaque_token';

因此，您现在可以查看modules/@angular/core/src/di/decorators.ts文件，您将看到相应的装饰器。

export var Injectable: InjectableMetadataFactory =
<InjectableMetadataFactory>makeDecorator(InjectableMetadata);

Answer 2

如果您使用JetBrains＆＃39; web IDE＆＃34; WebStorm，＆＃34;您只需ctrl + click组件类名称，它将带您进入声明。这使得从一个组件快速导航到另一个组件。

https://www.jetbrains.com/webstorm/

Answer 3

Angular2是开源的，所以在它的github存储库中你可以找到所有的角度实现： https://github.com/angular/angular

<强>更新

要准确了解每个类或方法的导出位置，请查看angular.io页面底部的链接，指向存储库定义和实现。

Answer 4

我刚刚在相关帖子中找到答案：Finding Angular2 class source code在提出问题之前我还没找到答案：

  

我建议API参考。大多数课程都是由几个部分组成的，来自各地。文档中每个对象底部的行可以是一个很好的起始点 - 例如从@ angular / core / src / metadata.ts（第76行）中定义的@ angular / core / index导出部件...

我认为这是查找包含类的文件的最快方法。也许马丁想到了这一点，但我还没有注意到文档页面中的底线，它给出了导出声明的文件。