Question

我写了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规则或贡献者定义？

Answer 1

如果您在default之前添加class，那么您将能够以与React / Vue相同的方式导入。

Answer 2

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

export class MyClass{}

以这种方式导入：

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

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

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

Answer 3

这是标准行为。

它允许您从文件中导出多个内容。

例如

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

但是如果你想改变它，你可以像{/ p>那样使用default关键字

export default class MyClass {}

它会导出你的课程，你不再需要括号了。

Answer 4

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

Answer 5

如果您使用＆＃39;从某个组件导入一些＆＃39;除非somecomponent中只有一个导出moudel，如果有多个导出模块，则必须使用{}指定导入moudle