生成组件时如何设置“导出默认类”而不是“导出类”

Question

我不知道为我的组件设置

export default

是否是一种不好的做法，我是 Angular 的新手，我想这样做，因为我想导入不带花括号的组件

我想要

ng g c 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 HomeComponent from "./home/home.component";

Answer 1

Angular 和

export default

的使用

关于 Angular 文档中的所有片段，似乎仅建议对 Angular 应用程序的路由文件使用

default

。 Angular 生态系统和开发工具主要设计用于使用标准导出语法。自过去两年以来，情况似乎正在发生变化。

根据 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 编译器

在 this 相关帖子中，2017 年，“导出默认值”似乎与 AOT 编译器存在问题 (

ng build --aot

)。此问题已于 2020 年 3 月修复。到目前为止，在我的测试中使用

export default

没有任何问题。

在 Angular CLI 中使用自定义模板

如果您想在组件模板中默认使用

export default

，我建议使用 Angular 原理图。您只需使用

export default

为自定义组件创建原理图模板，然后从 Angular CLI 调用您的自定义组件。您的原理图模板可能如下所示：

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() { }

}

Answer 2

就像 @bergi 所说，我将为您带来有关 Angular 良好实践的“有争议的答案”。

由于可维护性问题和易于重构，我将避免导出默认值。但这纯粹是个人的。我只是更喜欢阅读

import { Foo } from "./foo";

。事实上，从同一个包导入时很容易混淆默认导出和命名导出。

也就是说，从现在开始，您可以在 Angular 中使用导出默认值，而不会出现 AOT 编译器的问题。在文档中您可以找到使用导出默认值的案例

here

如果你想在 Angular CLI 工具中使用它，我建议你查看一下

Angular Schematics

Answer 3

目前还无法使用 Angular cli 生成默认导出的组件，您必须在生成后手动更新组件以使其成为默认导出。

如果您来自 React，您可能会对默认导出感到满意，但在 Angular 中，建议使用命名导出，因为与 React 不同，Angular 遵循严格的结构，并且使用默认导出可能会在 aot 编译等方面产生错误。