时间戳

首页 > 解决方案 > 什么是 Angular 中的编译上下文？

angular - 什么是 Angular 中的编译上下文？

问题描述

在 Angular 文档中，它说模块共享一个编译上下文。

NgModules 为其组件提供编译上下文。一个根 NgModule 总是有一个在引导过程中创建的根组件，但是任何 NgModule 都可以包含任意数量的附加组件，这些组件可以通过路由器加载或通过模板创建。属于 NgModule 的组件共享一个编译上下文。

来源

我在这里只找到了一种解释。但我并不完全理解它或它的重要性。有人可以详细说明“编译上下文”的含义以及模块共享相同上下文的重要性吗？

标签： angulartypescript

解决方案

Angular 文档说

属于 NgModule的组件共享一个编译上下文。

你有没有听过像这样的错误

警告：模板解析错误：“A”不是已知元素：

  1. 如果“b-comp”是一个 Angular 组件，则验证它是否是该模块的一部分。

  2. 如果“b-comp”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。

或者

无法绑定到“ngModel”，因为它不是“输入”的已知属性

编译上下文

您发现链接中的解释正确地描述了编译上下文的概念。

它是一组将被编译的东西（文件、组件）。这意味着上下文包含编译器需要编译而没有任何错误的所有内容。

想象一下，您编译打字稿并通过使用tsconfig.json文件 where definefiles或选项来控制上下文。这样，打字稿编译器将仅使用您提供的文件来查找 ts 代码之间的关系。includeexclude

角度编译器

现在让我们回到 Angular 编译器。

Angular 编译器基本上编译组件的模板。要编译模板，Angular 应该知道该模板中涉及的所有组件/指令。

假设我们有以下简单的组件：

@Component({
  selector: 'a-comp`,
  template: `
    <h2>Hello, I'm a-comp</h2>
    <div [scroll]="options">
      <b-comp></b-comp>
    </div>
  `
})
export class ComponentA {}

这个组件是在一些 Angular 模块中定义的，比如：

@NgModule({
  declarations: [
    ComponentA
  ]
})
export class AModule {}

为了编译ComponentAAngular，需要经过以下阶段：

1）找到它所属的NgModule。

ComponentA 在 AModule 中声明，所以这个模块成为它的编译上下文。

2) 查找本模块范围内的所有其他指令。

Angular 正在搜索这个 NgModule 的所有传递模块。（Angular 2 使用来自另一个模块的组件）

3）通过将所有涉及的指令传递给编译器来运行编译

compileComponent(outputCtx, compMeta, ngModule, ngModule.transitiveModule.directives 
                                                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

我们AModule没有导入任何其他模块，也没有定义任何其他指令。这意味着 Angular 将无法编译 ComponentA 的模板（如果您当然没有使用 CUSTOM_ELEMENTS_SCHEMA）：

<div [scroll]="options">
  <b-comp></b-comp>
</div>

因为 Angular 编译器会查找带有scroll@Input 和 for的指令，b-comp但是我们的 AModule 范围不包含这样的指令。

换句话说，NgModule 没有为构建组件提供正确的编译上下文。NgModule 是 Angular 编译器的一种配置，类似于 typescripttsconfig.json编译器。

同样，在 NgModule 中声明的组件和从导出它们的其他模块导入的组件共享相同的编译上下文（更多信息请参见Angular 2 Use component from another module）

推荐阅读