為什么要用角度的方法從“ some.component.ts”中使用“ import {SomeComponent}”，而不是從“ some.component.ts”中使用“ import SomeComponent”？

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

如果您在class前添加default ，那么您將能夠以與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 = {};

但是，如果要更改此設置，可以使用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

如果您使用“從某組件導入某些組件”，除非在某組件中只有一個出口組件，則如果有多個出口組件，則必須使用{}指定要導入的組件