Question

我正在关注Angular4-Firebase集成教程，首先他们在 app.module.ts 中编写以下代码 - 1。

import { AngularFireAuthModule } from 'angularfire2/auth';
    imports: [
      //Some other imports
      AngularFireModule.initializeApp(firebaseConfig),
      //Some more imports
    ],

然后在 app.component.ts 中，他们再次导入其他一些与firebase相关的内容 -

从'angularfire2 / auth'导入{AngularFireAuth};

现在我有以下问题 -

他们为什么要在app.module.ts和app.comonent.ts中的两个不同位置导入模块/依赖项。为什么他们不能在app.module.ts上这样做。
根据我的理解，看起来他们正在app.module.ts中导入模块'AngularFireAuthModule'，然后在他们需要使用的组件文件（app.component.js）中导入Firebase相关组件它。是这样吗？

如果任何人可以在Angular 4中深入理解模块和组件，那将是很棒的。我所关注的所有教程都使用angular cli，它在运行时生成所有内容，并且教程要求更新某些代码让它适合他们的地方。

提前致谢。

更新 - Here is the link to the said tutorial

Answer 1

回答你的问题我可以分开进口

组件导入

文件顶部的导入是TypeScript导入，用于生成当前文件已知的类，接口和变量，并且与角度依赖注入系统无关，通常这种情况发生在第三方库中。

模块导入

导入使用角度依赖注入，可以导出。这还创建了一个可以与元素共享的新实例（使其成为您在案例中配置参数的理想选择），而无需实例化多个时间。

Answer 2

导入声明

导入声明：

import { AngularFireAuthModule } from 'angularfire2/auth';

是ES 2015模块功能。在ES 2015中，模块是导入或导出内容的文件。每个ES 2015模块（即代码文件）都需要定义在何处查找它使用的内容。因此，如果代码文件使用@component装饰器，那么它需要有一个import语句来定义@component装饰器的位置：

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

导入数组

Angular模块与ES 2015模块不同。它们帮助我们组织应用程序。

Angular模块的imports数组定义了应用程序将使用的所有外部模块。

imports: [
  //Some other imports
  AngularFireModule.initializeApp(firebaseConfig),
  //Some more imports
],

我在这里有一个youtube视频，讨论了ES 2015模块和Angular模块之间的区别：https://www.youtube.com/watch?v=ntJ-P-Cvo7o&t=6s

Angular 4在模块和组件文件中导入了解

2 个答案: