Angular基础知识

Angular

Angular初探

1. ngfor

1. 应用范围
2. 获取索引
3. 获取第一项和最后一项
4. 获取偶数项和奇数项

2. 事件的处理和样式绑定

<ul>
  <li *ngFor="let menu of menus; let i = index; let f = first; let even =even;">
    <a 
      href="#" 
      [class.active]="selectIndex == i"
      [class.first]="f"
      （click）="selectIndex == i"
    >
        {{menu.title}}
    </a>
  </li>
</ul>

3. ngIf

<div *ngIf="条件表达式">
    在条件为真需要显示的内容
</div>

<div *ngIf="条件表达式 else elseContent">
    在条件为真需要显示的内容
</div>
<ng-template #elseContent>
  在条件为假时需要显示的内容
</ng-template>

<div *ngIf="条件表达式; then thenTemplate; 
else elseContent">
</div>
<ng-template #thenTemplate>
    在条件为真需要显示的内容
</ng-template>
<ng-template #elseContent>
  在条件为假时需要显示的内容
</ng-template>

4. 组件的输入输出

父组件 ====> 子组件 (属性绑定 @input)

子组件 ====> 父组件（事件绑定 @output）

5. 样式绑定的几种方式

• class.className对于单个样式的组件绑定最为合适

<div [class.className]="条件表达式">
  ...
</div>

• ngClass是自由度和拓展性最强的样式绑定方式

<div [ngClass]="{'One':true, 'Two':true, 'Three':false}">
  ...
</div>

• ngStyle是嵌入式样式，它会覆盖掉其他样式，使用时需谨慎

<div [ngStyle]="{'color':someColor, 'font-size':fontSize}">
  ...
</div>

基础知识

1. 组件生命周期

1. constructor 构造函数永远首先被调用
2. ngOnChanges 输入属性变化时被调用（在组件的@input属性发生变化时调用； @param changes是索引对象，key是属性的名称，value是SimpleChanges）
3. ngOnInit 组件初始化时被调用
4. ngDoCheck 脏值检测时被调用
   • ngAfterContentInit 当内容投影ng-content完成时调用
   • ngAfterContentChecked
   • ngAfterViewInit 当组件视图（子视图）初始化完成时
   • ngAfterViewChecked 当检测视图变化时（多次）
5. ngDestroy 组件销毁时调用

1. 在组件类中引用模板

<div #helloDiv>
  你好
</div>

#后面是给模板或者DOM元素起一个引用名字，以便可以在组件类或模板中进行引用。

export class AppComponent{

@ViewChild（‘helloDiv’） helloDivRef:ElementRef;
}

@ViewChild是一个选择器，用来查找DOM元素或者组件

ElementRef是DOM元素的一个包装类

因为DOM元素不是Angular中的类，所以需要包装类以便在Angular中使用和标识其类型。

2. 模板在组件类中引用

<app-image-slider [sliders]="imageSliders">
</app-image-slider>
 
 @ViewChild('ImageSliderComponent')
 imageSlider:'ImageSliderComponent'

@ViewChild可以使用引用名，也可以用组件类型

3. 引用多个模板元素

<img
  #img
  *ngFor="let slide of sliders"
  [src]="slider.imgUrl"
  [alt]="slider.caption"
/>
 

@viewChildren(‘img’) imgs:QueryList<ElementRef>;

可以使用@ViewChildren，在@ViewChildren中使用引用名

或者使用Angular组件/指令类型。声明类型为QueryList<?>

4. @ViewChild总结

@ViewChild用来在类中引用模板中的视图节点

可以是Angular组件，也可以是HTML元素

在AfterViewInit中可以安全地使用@ViewChild引用的元素

推荐使用Renderer2操作DOM元素

双向绑定

<input
  type="text"
  [value]="username"
  (input)="username = $event.target.value"
/>
<input
  type="text"
  [(ngModel)]="username"
/>
<input
  type="text"
  [ngModel]="username"
  (ngModelChange)="username = $event"
/>
 

ngModel

• FormsModule中提供的指令
• 使用[(ngModel)]="变量"形式进行双向数据绑定
• 其实是一个语法糖
• [ngModel]=“username” （ngModelChange）=“username = $event”

什么是模块

模块就是提供相对独立功能的一套代码

• 模块的组成功能可以有：组件、服务、指令、管道
• 从某种角度来说，它就是一个小型应用

@NgModule注解

• declarations数组：模块拥有的组件、指令或管道。注意每个组件/指令/管道只能在一个组件声明。
• providers数组：模块中需要使用的服务。
• exports数组：暴露给其他组件使用的组件、指令或管道。
• imports数组：导入本模块需要的依赖模块，注意是模块。

模块的坑

1. 导入其他模块时，需要知道该模块的目的

• 如果是组件，那么需要在每一个需要的模块都进行导入
• 如果是服务，那么一般来说在模块中导入一次即可

2. 需要在每个需要的模块中进行导入的

• CommonModule :提供绑定、ngIf和ngFor等基础指令，基本上每个模块都需要导入它。
• FormsModule/ReactoveFormsModule ：表单模块需要在每个需要的模块导入。
• 提供组件、指令或管道的模块。

3.只在根模块导入一次的

• HttpClientModule/BrowserAnimationsModule/NoopAnimationsModule
• 只提供服务的模块