为什么角度使用 `import { SomeComponent } from 'some.component.ts'` 而不是 `import SomeComponent from 'some.component.ts'`答案

【问题标题】：Why angular use `import { SomeComponent } from 'some.component.ts'` instead of `import SomeComponent from 'some.component.ts'`为什么角度使用 `import { SomeComponent } from 'some.component.ts'` 而不是 `import SomeComponent from 'some.component.ts'`
【发布时间】：2018-01-05 16:53:28
【问题描述】：

我编写 React/Vue。像往常一样，我喜欢导出/导入默认组件。

// export
export default class SomeComponent from Component {
    // blahblah
}

// import
import SomeComponent from './some.js'

但是当我使用angular2+时，我发现了一个奇怪的事情。它使用破坏性的导入/导出形式。

// export
@Component({/* ... */})
export class SomeComponent {
    // blahblah
}

// import
import {SomeComponent} from './some.component.ts'

为什么？我觉得有点麻烦。它是由 Typescript 规则或贡献者定义的？

【问题讨论】：

您忘记按设置为default 按钮:)
Why isn't "export default" recommended in Angular?的可能重复

标签： javascript angular typescript ecmascript-6

【解决方案1】：

如果你在class 之前添加default，那么你将能够像在 React/Vue 中一样导入。

【讨论】：

【解决方案2】：

一个打字稿或javascript文件可以导出多个类（或函数、常量）。由于这种行为，您以这种方式导出您的类（或函数、常量）：

export class MyClass{}

并以这种方式导入：

// import
import {MyClass} from './myClass.ts'

如果您确定只导出单个类（或函数、常量），则只需使用以下语法：

//export
export default class MyClass{}
//import
import MyClass from "./myclass.ts"

【讨论】：

【解决方案3】：

这是标准行为。

它允许您从文件中导出一些内容。

例如

export class MyClass {}
export const MyClassMockedForTesting = {};

但是如果你想改变它，你可以像这样使用default关键字

export default class MyClass {}

它将导出您的课程，您将不再需要括号。

【讨论】：

【解决方案4】：

Angular 不会在其包中使用默认导入，因为默认导入并不好。其他人已经在单独的帖子中介绍了原因，所以我将在这里链接到一个。 https://blog.neufund.org/why-we-have-banned-default-exports-and-you-should-do-the-same-d51fdc2cf2ad

【讨论】：

【解决方案5】：

如果你使用'import some from somecomponent'，除非somecomponent中只有一个export moudel，如果有多个export moudle，你必须使用{}指定import哪个moudle

【讨论】：