Angular点滴

2021-11-19                                                                   晴

1.首先基于angular-cli   生成项目的基本骨架，生成好以后，只需要在src/app目录下进行编码。

2.生成新的component的步骤，可以使用命令:ng generate component <component-name>

3.component组件有3个部分组成，.component.ts，.component.scss，.component.html ，逻辑在ts文件中，ts 使用@Component 注解来指定selector，templateUrl，styleUrls。需要注意的是：注意selector标签指定的名字。

使用@Component注解  需要从angular的核心库中core导入。

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-candidate-resume',
    templateUrl: './candidate-resume.component.html',
    styleUrls: ['./candidate-resume.component.scss']
})
export class CandidateResumeComponent implements OnInit{
}

4.定义好component后，需要在xxx-moudel.ts文件中的@NgModule({declarations:[]))的declarations数组里面进行导入，如下图所示。

import { CandidateResumeComponent } from '@dism/app/pages/candidate-management/candidate-resume/candidate-resume.component';
@NgModule({
    declarations: [
        CandidateResumeComponent
    ],
    imports: [
        RouterModule

    ],
    exports: [],
    providers: [CandidateChannelHttpService],
    entryComponents: []
})
export class CandidateManagementModule {}

5.所有的component最后都会导入到app.modules.ts中

关于路由

1.当每个模块都有自己的路由，路由中有path   component   children组成

import { CandidateManagementComponent } from '@dism/app/pages/candidate-management/candidate-management.component';
const routes: Routes = [
    {
        path: '',
        component: CandidateManagementComponent,
        children: []
    }
]

2.不是app-routing.modules.ts时，往RouterModule注册时，需要使用forChild 属性。

  只有app-routing.modules.ts属性时，往RounterModule注册时，使用forRoot属性。

3.当需要跳转到component，需要使用<a  routerlink="">   也可以使用<router-outtet>标记

4.@Injectable()  注解，表示这个类已经注入到angular容器中，类似于spring的IOC，@Component注解  表示这是一个注解，再使用的时候，直接再构造方法中使用就可以了。如下图所示，就是将configService当做一个组件，再需要使用的地方直接使用就可以了。

 5.完整教程可以参考   W3C  YYDS  Angular9 准备工作_w3cschool要想使用 HttpClient，就要先导入 Angular 的 HttpClientModule。大多数应用都会在根模块 AppModule 中导入它。Path："app/app.module.ts (excerpt)" 。import { NgModule }_来自Angular9 中文教程，w3cschool编程狮。https://www.w3cschool.cn/angulerten/angulerten-7uij37zb.html

 6.使用表单提交

angular使用表单提交数据  ，先在component.ts文件中导入formbuilder，然后在调用formbuilder.group(new FormController('ssss'))   方法指定属性名，

该属性名和input的标签的formcontrolName对应,这样angular会自动帮我把这个表单数据绑定好。

7.关于componment和module的区别。

在一个module中，比如在下图中。

在declarations中应该声明的是component组件  表名在本module中使用了那些component，在imports中表示引入其他的module。

他们之间的关系：

    多个component组成moduel，component一定会属于某个module，Module可以引用其他的module。