Angular 2中的Import语句顺序

Question

Angular Style Guide指出了导入行间距：

• 考虑在第三方导入和第三方之间留下一个空行 应用程序导入。
• 考虑列出按字母顺序排列的导入行 模块。
• 考虑列出结构化导入的符号 按字母顺序。
• 为什么？空行将你的东西与他们的东西分开 东西。
• 为什么？字母顺序使读取和定位符号更容易。

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

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

但接口和管道等呢？导入“无名”或通配符模块的惯例是什么，例如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';

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

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

符号是什么并不重要;重要的是导入行由模块按字母顺序排列。 e.g。

1. angularfire2 / AUTH
2. 火力/应用
3. rxjs /接收
4. rxjs /添加/可观察的/的
5. rxjs /添加/操作者/捕获

在Angular代码库中，很明显小写字符列在大写或大写字符之后，因此：'rxjs / Rx'列在之前'rxjs / add / observable / of'和'rxjs /添加/操作者/捕获'

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

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

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

将“destructured import 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';