Angular9/8:如何创建Angular组件?

分享于 

3分钟阅读

Angular

  繁體

如何将ng generate componentng gc与Angular 9CLI一起使用

假设我们想创建一个Angular组件。

打开一个新的命令行接口,导航到root的Angular项目,并运行以下命令:


$ ng generate component home

或者也可以运行以下命令:


$ ng g c home

Angular CLI将为项目的src/app文件夹中的组件生成4个文件:


 /home/home.component.ts # Component class
 /home/home.component.html # Component template
 /home/home.component.css # Component styles
 /home/home.component.spec.ts # Component tests

可以自定义组件文件的放置位置。

Angular CLI将组件添加到模块的declarations数组中。


@NgModule({
 // [...]
 declarations: [ AppComponent, HomeComponent ]
 // [...]
})
export class AppModule { }

这将允许HomeComponentAppModule的组件中。

如何自定义ng generate component在Angular 9中的输出

默认情况下,ng generate componentng gc命令为组件生成一个文件夹和四个文件,

ng generate command使用标志

生成一个没有子文件夹和规范文件的about组件。

回到终端,并运行以下命令:


$ ng generate component about --flat=true --spec=false

使用angular.json文件

现在,通过示例看看如何从angular.json文件配置CLI,以不为组件生成.spec.ts文件。

返回到终端,并运行以下命令:


$ ng config schematics.@schematics/angular:component.spec false

如何设置组件的文件夹

您可以通过如下指定路径来定义组件的文件夹:


$ ng generate component components/contact

这将创建contact组件内部的components文件夹。

手动创建Angular 9组件

你还可以通过创建必要的文件,并将组件类添加到应该使用的模块的declarations数组中,手动创建Angular组件。


COM  angular  component  组件  
相关文章