在 Angular 中,使用 Angular CLI 可以快速生成组件。默认情况下,生成的组件会包含一些基本的文件和代码,包括 HTML 模板、CSS 样式、测试文件等。如果你想创建一个框架较少的组件,可以通过 Angular CLI 提供的选项来控制生成的内容。
以下是一些常用的 Angular CLI 命令选项,可以帮助你创建一个框架较少的组件:
--inline-template
或 -t
:将模板内联到组件的 TypeScript 文件中,而不是生成单独的 HTML 文件。--inline-style
或 -s
:将样式内联到组件的 TypeScript 文件中,而不是生成单独的 CSS 文件。--skip-tests
或 -S
:跳过生成测试文件。假设你想创建一个名为 minimal
的组件,并且希望将模板和样式内联到组件的 TypeScript 文件中,同时跳过生成测试文件,可以使用以下命令:
ng generate component minimal --inline-template --inline-style --skip-tests
或者使用简写形式:
ng g c minimal -t -s -S
ng generate component minimal
或 ng g c minimal
:生成一个名为 minimal
的组件。--inline-template
或 -t
:将模板内联到组件的 TypeScript 文件中。--inline-style
或 -s
:将样式内联到组件的 TypeScript 文件中。--skip-tests
或 -S
:跳过生成测试文件。运行上述命令后,生成的组件文件 minimal.component.ts
将如下所示:
import { Component } from '@angular/core';
@Component({
selector: 'app-minimal',
template: `
<p>
minimal works!
</p>
`,
styles: [`
p {
color: blue;
}
`]
})
export class MinimalComponent { }
你会注意到,模板和样式都被内联到了组件的 TypeScript 文件中,并且没有生成单独的 HTML、CSS 和测试文件。
领取专属 10元无门槛券
手把手带您无忧上云