例如下面的代碼沒有按預期作業。假設我有按鈕命名空間：
namespace Button {
@Component({
selector: 'super-button',
templateUrl: './button.component.html',
styleUrls: ['./button.component.scss']
})
export class ButtonComponent {}
@NgModule({
declarations: [
ButtonComponent
],
imports: [
CommonModule
],
exports: [ButtonComponent]
})
export class ButtonModule { }
}
export default Button;
在 app.module 中：
import Button from './button';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
Button.ButtonModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
我收到此編譯錯誤：
<e> [webpack-dev-middleware] Error: [object Object]
<e> at analyzingFileEmitter (E:\Projects\Angular\test-app\node_modules\@ngtools\webpack\src\ivy\plugin.js:452:23)
<e> at processTicksAndRejections (node:internal/process/task_queues:96:5)
<e> at async AngularWebpackPlugin.rebuildRequiredFiles (E:\Projects\Angular\test-app\node_modules\@ngtools\webpack\src\ivy\plugin.js:277:36)
<e> at async E:\Projects\Angular\test-app\node_modules\@ngtools\webpack\src\ivy\plugin.js:218:17
更重要的是，如何將組件和模塊拆分為不同的檔案，同時仍將它們放在同一個命名空間中？我嘗試了以下方法，但無濟于事： https ://www.typescriptlang.org/docs/handbook/namespaces.html#multi-file-namespaces
我的觀點是用大量的組件和模塊來組織專案。我有很多名稱很長的檔案來描述其功能，例如：
-> very-descriptive-A-list.module
-> very-descriptive-A-list.component
-> very-descriptive-A-list-item.component
-> very-descriptive-A-list-modal.component etc
我只想創建一個包含每個功能的命名空間，就像這樣：
-> very-describtive-A namespace:
->> list.module,
->> list.component,
->> item.component
->> modal.component etc
-> very-describtive-B namespace:
->> list.module,
->> list.component,
->> item.component
->> modal.component etc
對于其他所有功能，依此類推。我只是在考慮減少檔案名中的樣板檔案，這對 IDE 智能感知也有好處，因為命名空間內的組件被封裝和隱藏。
uj5u.com熱心網友回復：
Typescript 命名空間在這一點上基本上已經過時了。TypeScript 在 ES 模塊被添加到 ES6 之前就有這個概念。TypeScript 的設計目標是盡可能使語言與 ECMA 保持同步，因此雖然它可能在 ECMA 之前就有一個特性，但如果以后添加它，它將有利于本機實作。TypeScript 的“外部模塊”現在在很大程度上與 ES 模塊沒有區別，并且對于這兩種用例來說都足夠了。見https://www.typescriptlang.org/docs/handbook/namespaces-and-modules.html#needless-namespacing
您正在尋找的行為是index.ts檔案的目的。通常，當給定目錄有一個 時index.ts，這意味著該目錄的其他內容是“內部的”（即不被目錄之外的任何東西使用），并且從索引匯出的東西是“外部模塊”。
button
├── button-component.ts
├── button-module.ts
└── index.ts
通常index.ts看起來像：
export { ButtonComponent } from './button-component';
export { ButtonModule } from './button-module';
對于您問題中的行為，您可以將整個模塊匯入到一個變數中，例如：
import * as Button from './button';
// ...
imports: [
Button.ButtonModule,
但是，更常見的是只匯入所需的特定成員，例如：
import { ButtonModule } from './button';
你當然可以用任何一種方式來做，但前者更符合習慣，正如在同一個地方使用的CommonModuleor所證明的那樣。AppRoutingModule顯式命名空間完全沒有必要，因為import.
語法在少數情況下import * as很方便，其中匯出大量一起使用的東西，但典型的用例是匯出一組密切相關的函式的模塊，而不是一堆型別。例如
api/
├── create-user.ts
├── delete-user.ts
├── get-user.ts
├── index.ts
└── update-user.ts
import * as api from './api';
// ...
await api.getUser(123);
await api.deleteUser(123);
api.ts它與匯出具有所有這些方法的物件沒有區別，但可以方便地將代碼組織在單獨的檔案中。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/482267.html
標籤：javascript 有角度的 打字稿 网页包