Angular 2 中的导入语句顺序

Question

Angular 风格指南关于导入行间距的说明：

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

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

再一次，似乎惯例是先导入服务，然后是模型，然后是组件。

但是接口和管道等呢？导入 'nameless' 或通配符模块的约定是什么，例如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 代码库并更好地理解指南后，就有了答案。

"Consider leaving one empty line between third party imports and application imports."

这个只需要一个例子来说明：

// 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';

"Consider listing import lines alphabetized by the module."

将 'modules' 视为 "from" 之后的位。模块包含要导入的符号。

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';

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

angularfire2/auth
firebase/app
rxjs/Rx
rxjs/add/observable/of
rxjs/add/operator/catch

在 Angular 代码库中，很明显小写字符列在大写或大写字符之后，因此：'rxjs/Rx' 列在之前 'rxjs/add/observable/of' 和 'rxjs/add/operator/catch'

"Consider listing destructured imported symbols alphabetically."

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

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

将 "destructured imported symbol" 视为从其父模块中提取的导出符号。本例中 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';

Angular 2 中的导入语句顺序

Order of Import statements in Angular 2

angular

convention

导入 RxJs 运算符的示例服务

或者

"Consider leaving one empty line between third party imports and application imports."

"Consider listing import lines alphabetized by the module."

"Consider listing destructured imported symbols alphabetically."