angular学习笔记

综述：最近一个公司项目使用了angular,总结下在代码中学到的东西，加深理解和认识  

1.部分代码分析？

• node.proxy.ts文件的作用是？

一系列的get和set修饰的变量，实现对于数据变化的监控，以及当一个值变化时候，应该去干什么操作的记录。

• param.proxy.ts的作用是？

一系列的get和set修饰的变量，实现对于数据变化的监控，以及当一个值变化时候，应该去干什么操作的记录。

• plan.cache.ts作用是？

通过map数据结构来存储数据，实现数据的缓存。

• plan.holder.ts作用？

集中维护数据的仓库，holder 保持住当前的数据。

[译] 认识 rxjs 中的 BehaviorSubject、ReplaySubject 以及 AsyncSubject_weixin_34265814的博客-CSDN博客

• plan.model作用？

通过calss或者interface的形式来定义数据的结构。

• src\app\cache.resolve.ts文件夹的作用是？

目前这个缓存文件只是引入到项目中，未应用，实际作用需要研究下。

2.core和share文件夹的区别是？如何使用？

share中的是可以直接复用的ui组件，core中则是可以复用的工具类，是逻辑层面的东西。

3.当前项目的配置文件是如何发挥作用的？和其他项目差别如此大？各个框架的实现思路差别非常大，黑心实现细节才是重点。

4.sys_params的作用？和后端的交互流程？

目前访问前端时候，是先去sys_params中定义的天眼的地址，天眼登录后带上登录信息，去部署的后端，后端拿到天眼的登录tickets之后，将认证信息保存下来，再返回到我们的前端地址就能访问我们的前端项目了。每次交互都需要带上交互的参数实现鉴权。

angular学习笔记：Angular教程_Angular8 Angular9 Angular12入门实战视频教程-2021年更新【IT营】_哔哩哔哩_bilibili

5.app.module.ts模块主要内容和作用是什么？

6.如何在一个组件中，引入另外一个组件并使用？

  以迁移一个向上的下拉组件为例子，将它迁移过来的顺序是：

• 将另一个页面的上拉组件内容全部copy过来，复制到需要的页面的目录下
• 在新的页面的module.ts文件种，imports 这个组件module
• 在这个页面中就可以引用这个组件即刻
• 在组件中去请求数据，将获取到的数据注入到相应的变量中即可 

  this.interfaceService.getInterfaceNetworkData().subscribe(rep => {
        console.log(rep, 9999)
  });

7.angular是如何实现他的数据集中管理的，和react，vue进行对比？

全局的数据统一维护在src\app\global.holder.ts中，通过订阅的方式，当数据修改时候触发相应的操作。

8.angular这些依赖分别是干什么作用的？OnInit · angular学习笔记 · 看云

• @angular//animations 动画库
• @angular/cdk=angular component development kit 组件开发配套包，cdk的目标是为开发人员提供更多的工具，以为网络构建出出色的组件，cdk由许多服务，指令，组件，类，模块等组成，使我们在开发angular组件时更轻松。

• @angular/common  实现Angular框架的基本功能，包括指令和管道、路由中使用的位置服务、HTTP服务、本地化支持等

• @angular/compiler   编译器是什么，简而言之就是开发者代码和最终运行时代码之间的一切工作

• @angular/core    实现Angular的核心功能、底层服务和实用程序

• @angular/forms  简单的来说下Angular Form表单，Form，是商业应用的支柱，一般，我们用它来登录、预定机票、安排会议等等一些数据录入任务。在Angular中构建表单的技术有两种：响应式表单和模板驱动表单。它们都属于@angular/forms库，并且共享一组公共的表单控件类。但是在设计哲学、编程风格和具体技术有显著区别，所以他们有自己的模块：ReactiveFormsModule和FormsModule

• @angular/localize   是一个新的包，它在 Ivy 应用中支持信息的 i18n，做国际化的

• @angular/platform-browser

• @angular/platform-browser-dynamic

• @angular/router

• @ng-bootstrap/ng-bootstrap

• ace-diff :  This is a wrapper for Ace Editor to provide a 2-panel diffing/merging tool that visualizes differences in two documents and allows users to copy changes from to the other.

• brace

• date-fns

• jsplumb

• rxjs 是使用observable的响应式编程的库，它使编写异步或基于回调的代码更容易

• summernote

• tinycolor2

• toastr

• zone.js

9.  angular中怎样实现父子组件之间的通信？父组件如何向子组件传参数？

• 在父组件中调用子组件时候，写好相应的方法 

  <ai-execute-env class="btn-wrapper" (test)="test($event)"></ai-execute-env>

• 子组件调用父组件中的方法

   
  @Output() test = new EventEmitter(); //必须要引入这个，才会用作用？
  
  emitExecute(id: number): void {
       this.test.emit(id)
   }

• 子组件中调用自己定义的方法

<button class="btn btn-primary" (click)="emitExecute(environments[0].intf_test_network_id)" *ngIf="environments.length === 1">测&#12288;试</button>

10.在angular中请求数据时候，subscribe的作用是？就是一个订阅者，订阅这个请求，当请求结束后需要执行的事情。

 this.interfaceService.getInterfaceNetworkData().subscribe(rep => {
           this.environments = rep
 });    

11.xtend和implement的主要区别是，implement改变了类的prototype属性，而extend只是新建了一个副本。这意味着如果你通过implement对类做了改变，那将改变他的所有实例，而通过extend改变类的话，不会改变在此之前存在的实例，思考这个代码的实现逻辑思路。

import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
import { GlobalHolder } from 'app/global.holder';
import { ProductEnv } from 'app/product/product.model';
import { InterfaceService } from 'app/interface/api/interface.service';

@Component({
    selector: 'ai-execute-env',
    templateUrl: 'execute.env.component.html'
})

export class ExecuteEnvComponent implements OnInit, OnDestroy {
    environments: Array<ProductEnv> = [];
    @Output() test = new EventEmitter();
    constructor(
        private global: GlobalHolder,
        private interfaceService: InterfaceService
        ){
    }

    ngOnInit() {
        this.interfaceService.getInterfaceNetworkData().subscribe(rep => {
           this.environments = rep
        });        
    }

    emitExecute(id: number): void {
          this.test.emit(id)
    }
    ngOnDestroy() {
    }
}

12.holder的作用是？

保持住数据的方案。

13.module作用是？分别的作用是？

@NgModule({
    imports: [
        apiRouting
    ],
    declarations: [
        InterfaceComponent
    ],
    exports: [
        ServiceEditComponent
    ],
    entryComponent:[],
    providers: [
        InterfaceHolder,
    ]，
    
})
export class InterfaceApiModule {

}

14.在@Component中的providers这里定义的内容该如何去理解？具体的作用是？

15.module.ts文件作用是？为何有的模块没有这个呢？module.ts文件中定义的@NgModule作用是？

16.@NgModule中定义的imports，declarations，entryComponents，providers，bootstrap分别的作用？这个内容十分的重要。

declarations：用来放组件、指令、管道的声明。
imports：用来导入外部模块。
providers：需要使用的 Service 都放在这里。
bootstrap：定义启动组件。你可能注意到了这个配置项是一个数组，也就是说可以指定做个组件作为启动点，但是这种用法是很罕见的。

17.set和get的作用是？

18.@Input,@Output,,   @AiComponent()，@ViewChild(AceEditorDirective)分别的作用是什么？

19.如何理解下方的代码？在小括号后边的赋值操作具体的作用是啥？

依赖注入，将外部的服务注入到本服务中即可。

  constructor(private initializerService: PageInitializerService, private submitService: PageSubmitService) {
      this.xxx= yyyy
    }

20.分析现实现思路是什么？

let subscription = this.global.product.pipe<Array<Group>>(mergeMap(product => {
            this.product = product;
            if (product) {
                return this.groupService.qryGroup(product.product_id, 'widget');
            } else {
                return of([]);
            }
        })).subscribe(groups => {})

21.什么作用呢？

if (module['hot']) {
    module['hot'].accept();
}

22.switchMap的作用和使用场景？

rxjs， map,  flatMap，mergeMap, switchMap 区别是啥？

rxjs map, flatMap/mergeMap, switchMap区别_好好学习，天天向上！-CSDN博客

switchMap 和其他打平操作符的主要区别是它具有取消效果。在每次发出时，会取消前一个内部 observable (你所提供函数的结果) 的订阅，然后订阅一个新的 observable 。你可以通过短语切换成一个新的 observable来记忆它.

23.@component 中的providers选项的具体作用是什么？

24.以下代码的作用是什么？

import { PAGE_SUBMIT_PROCESSORS } from 'app/ui/page/submit';

@Component({
    selector: 'ai-ui-page-edit',
    templateUrl: 'ui.page.edit.component.html',
    styleUrls: ['ui.page.edit.scss'],
    providers: [
        ...PAGE_SUBMIT_PROCESSORS
    ]
})

export const PAGE_SUBMIT_PROCESSORS: ClassProvider[] = [
    { provide: SUBMIT_PROCESSOR, useClass: PageValidateSubmit, multi: true },
    { provide: SUBMIT_PROCESSOR, useClass: GlobalProductSubmit, multi: true },
    { provide: SUBMIT_PROCESSOR, useClass: PageModSubmit, multi: true },
    { provide: SUBMIT_PROCESSOR, useClass: PageAddSubmit, multi: true }
];

25.保存功能代码全局分析？为何每次需要返回原来的路由地址并触发数据查询初始化？

 submit(item: UIPage): void {
        let id = item.component_id;
        this.processors.reduce<Observable<any>>((previousValue, currentValue) => previousValue.pipe(switchMap(pre => currentValue.postProcess(pre))), of(item)).subscribe(() => {
            if (isPresent(this.drawerRef)) {
                this.drawerRef.close(item);
                return;
            }
            if (isPresent(id)) {
                toastr.success('组件保存成功');
                // this.eventManager.broadcast('update-page', item);
            } else {
                toastr.success('添加组件成功');
                this.eventManager.broadcast('add-page', item);
            }
            this.router.navigate([`pages/ui/page/edit/${item.component_id}`]);
        });
    }

26.代码分析？ @Optional()和@Inject(SUBMIT_PROCESSOR)分别的作用是什么？

constructor(private router: Router,
                @Optional() private drawerRef: DrawerRef,
                private eventManager: EventManager,
                @Inject(SUBMIT_PROCESSOR) private processors: SubmitProcessor[]) {
    }

27.以下代码的作用是啥？

 @HostBinding('class.d-none')


说明文档：  https://blog.csdn.net/i042416/article/details/108950049

28.以下内容的具体作用是什么？

import { merge, Observable, of, Subject } from 'rxjs';
import { filter, switchMap, switchMapTo, takeUntil, tap } from 'rxjs/operators';

import { Observable, of, Subscription } from 'rxjs';
import { mergeMap, tap } from 'rxjs/operators';
import { DrawerService, EventManager, isPresent, ModalService } from 'share';

29.pipe管道的具体的作用是什么？在请求发出去之后还使用管道有啥实际作用？

return this.http.get(this.baseUrl, { params }).pipe(map<any, Array<Product>>(page => page.page_data || []));

 就是管道，简单来说，管道的作用就是传输。并且不同的管道具有不同的作用。(其实就是处理数据);

Angular自带的pipe函数有：专门用来处理数据的管道。

DatePipe : 日期管道，格式化日期

JsonPipe :  将输入数据对象经过JSON.stringify()方法转换后输出对象的字符串

UpperCasePipe: 将文本所有小写字母转换成大写字母

LowerCasePipe: 将文本所有大写字母转换成小写字母

DecimalPipe: 将数值按照特定的格式显示文本

CurrentcyPipe: 将数值进行货币格式化处理

SlicePipe: 将数组或者字符串裁剪成新子集

PercentPipe:  将数值转百分比格式

30.在angular项目中，如何实现对表格数据的勾选功能，这个环境的api太多，非常的冗杂，对于入门者来说并不容易接受。

详情见计划和告警规则的生效，失效批量处理。

31.@Component组件中的providers主要的作用是啥？里面的配置内容主要是干啥的？这个知识点需要记录一下。

import { VALIDATABLE, forwardRef } from '@angular/core';
@Component({
    selector: 'ai-plan',
    templateUrl: 'plan.component.html',
    styleUrls: ['plan.component.scss'],
    providers: [{
        provide: VALIDATABLE,
        useExisting: forwardRef(() => PlanComponent)
    }]
})

32.