提问人：otaxhu 提问时间：10/3/2023 更新时间：11/15/2023 访问量：69
生成组件而不是“导出类”时如何在 angular.json 中设置“导出默认类”
how to set in the angular.json `export default class` when generating components instead of `export class`
问：
我不知道这是否是一种不好的做法，我是 Angular 的新手，我想这样做是因为我想导入没有大括号的组件
因此，与其生成这个：
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-home',
standalone: true,
imports: [CommonModule],
templateUrl: './home.component.html'
})
export class HomeComponent {
}
我想生成这个：
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-home',
standalone: true,
imports: [CommonModule],
templateUrl: './home.component.html'
})
export default class HomeComponent { // Note the default modifier.
}
因此，我可以将其导入到任何组件中，而无需大括号
import { Component } from "@angular/core";
import HomeComponent from "./home/home.component"; // importing without the curly braces
@Component({
selector: 'app-root',
standalone: true,
imports: [HomeComponent],
template: `<app-home></app-home>`,
})
export default class AppComponent {
}
答：
-1赞
Darshan Patel
11/21/2023
#1
截至目前，无法使用 angular cli 生成具有默认导出的组件，您必须在生成后手动更新组件以使其成为默认导出。
如果你来自 React，你可能会对默认导出感到满意，但在 angular 中，建议使用命名导出，因为与 react 不同，angular 遵循严格的结构，使用默认导出可能会在 aot 编译等方面产生错误。
1赞
dev_crosspoints
11/21/2023
#2
就像@bergi说的，我将为您带来关于 Angular 良好实践的“opioned 答案”。
我将避免导出默认值，因为可维护性问题和易于重构。但这纯粹是个人的。我只是更喜欢阅读.事实上，从同一个包导入时，很容易混淆默认导出和命名导出。import { Foo } from "./foo";
话虽如此，从现在开始，您可以在 Angular 中使用导出默认值，而不会遇到 AOT compiller 的问题。在文档中，您可以在此处找到使用导出默认值的案例
如果你想在 Angular CLI 工具中使用它，我可以建议你查看一下Angular Schematics
评论
1赞
PaulCrp
11/21/2023
非常感谢你，正是我在寻找的！但我不明白为什么您的链接与 AOT 编译器有关Angular Schematics
4赞
PaulCrp
11/21/2023
#3
Angular 和export default
关于 Angular 文档中的所有片段，似乎只建议对 Angular 应用程序的路由文件使用 。Angular 生态系统和开发工具主要设计用于使用标准导出语法。自过去 2 年以来，情况似乎正在发生变化。default
根据 Angular 文档的这一部分以及 Angular Github 存储库中的这个 #issue，现在 Angular 15+ 支持默认导出。例如，在 loadChildren 或 loadComponent 回调中，您可以执行以下操作：
/* app.routes.ts */
export const appRoutes: Routes = [
{
path: '',
loadComponent: () => import('./home/home.component'),
}
];
/* home.component.ts */
@Component({ /* ... */ })
export default class HomeComponent {}
AOT 和 JIT 编译器
在这篇相关文章中，在 2017 年，“导出默认值”似乎与 AOT 编译器（）有关。此问题已于 2020 年 3 月修复。到目前为止，我在测试中使用没有任何问题。ng build --aotexport default
在 Angular CLI 中使用自定义模板
如果您想在组件模板中默认使用，我建议使用 Angular 原理图。您只需要使用angular CLI为自定义组件创建原理图模板，然后调用自定义组件即可。原理图模板如下所示：export defaultexport default
import { Component } from '@angular/core';
@Component({
selector: '<%= selector %>',
templateUrl: './<%= dasherize(name) %>.component.html',
styleUrls: ['./<%= dasherize(name) %>.component.css']
})
export default class <%= classify(name) %><%= classify(type) %> {
constructor() { }
}
评论
0赞
otaxhu
11/22/2023
如何创建自定义原理图？
0赞
PaulCrp
11/23/2023
@otaxhu，我认为;)，这是另一篇帖子的一个大问题。请记住，原理图不是一个单行解决方案，而是一个强大的工具，用于自定义 CLI 生成的代码。你需要将一个 npm 项目专用于它，并将其链接到你的项目。要从原理图开始，并完全按照您想要实现的目标，您可以查看这个非常详细的教程：medium.com/atlas/...
评论
ng buildng build --aot