angular - Angular 2中导入语句的顺序

Question

Angular Style Guide 说导入行间距:

• 考虑在第三方进口和应用导入。
• 考虑列出按字母顺序排列的导入行模块。
• 考虑列出解构的导入符号按字母顺序排列。
• 为什么？空行将你的东西和他们的分开东西。
• 为什么？按字母顺序排列可以更轻松地阅读和定位符号。

看看许多 Angular 项目，包括 Angular 本身，惯例是首先导入 Angular (@angular) 模块，然后是第三方模块(例如 AngularFire2)，然后是我们自己的模块(服务、组件、等)例如./some-service.ts.

再一次，看起来惯例是先导入服务，然后是模型，然后是组件。

但是接口(interface)和管道等呢？导入“无名”或通配符模块的约定是什么，例如Firebase SDK 或 RxJs 运营商？

例如:

导入 RxJs 运算符的示例服务

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

import { AngularFireAuth } from 'angularfire2/auth';
import {
  AngularFireDatabase,
  FirebaseListObservable
} from 'angularfire2/database';
import * as firebase from 'firebase/app';
import 'rxjs/add/operator/take';
...

或者

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

import {
  AngularFireDatabase,
  FirebaseListObservable
} from 'angularfire2/database';
import * as firebase from 'firebase/app';
import { Observable } from 'rxjs/Observable';

import { AuthService } from './auth.service';
// `GridMetadata` is an Interface
import { GridMetadata } from './grid-metadata';
...

Answer 1

实际上，查看 Angular 代码库并更好地理解指南后，就有了答案。

“考虑在第三方导入和应用程序导入之间留一个空行。”

这只需要一个例子来解释它:

// Core imports
import { TestBed, async, inject } from '@angular/core/testing';

// Third party imports
import { AngularFireAuth } from 'angularfire2/auth';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/observable/of';

// Application imports
import { AuthService } from './auth.service';
import { environment } from '../environments/environment';

“考虑按模块字母顺序列出导入行。”

将“模块”视为“来自”之后的位。模块包含要导入的符号。

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

import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/catch';

符号是什么并不重要；唯一重要的是导入行按模块的字母顺序排列。例如

1. angularfire2/auth
2. 火力基地/应用
3. rxjs/接收
4. rxjs/add/observable/of
5. rxjs/add/operator/catch

在 Angular 代码库中，很明显小写字符列在大写或大写字符之后，因此:'rxjs/Rx' 列在 before 'rxjs/add/observable/of' 和 'rxjs/添加/运算符(operator)/捕获'

“考虑按字母顺序列出解构的导入符号。”

import { TestBed, async, inject } from '@angular/core/testing';

import { AngularFireAuth } from 'angularfire2/auth';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/observable/of';

将“解构的导入符号”视为已从其父模块中提取的导出符号。在这个例子中，AngularFireAuth、Observable、TestBed、async 和 inject 都是解构的导入符号。

同样，顺序是按字母顺序排列的；首先是大写，然后是大写，然后是小写。这是来自 Angular 代码库的一个很好的例子:

import {CUSTOM_ELEMENTS_SCHEMA, Compiler, Component, Directive, Inject, Injectable, Injector, Input, NgModule, Optional, Pipe, SkipSelf, ɵstringify as stringify} from '@angular/core';

导入服务、管道、模型、指令或组件等似乎没有任何特定顺序。查看 Angular 代码库

请注意，父目录中的模块在那些更接近它们被导入的模块之后被导入，例如

import { AuthService } from './auth.service';
import { environment } from '../environments/environment';
import { abc } from '.../abc';