angular基础

 

 

 

前言

为什么不会angular的我会跳槽到一个用angular的公司？

---

 

一、angular基础架构组成和vscode插件

 

Path Intellisense 路径提示

color highlight #颜色显示

vscode-icon文件图标

Auto Import 自动导入

 

二、代码

1.Component装饰器

本质就是一个函数，能接收一个类或者类属性作为参数，算是一种语法糖

代码如下（示例）：

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

@Component({
  //selector选择器 会替换这个组件里面的内容
  selector: 'app-root',
  //模板路径
  templateUrl: './app.component.html',
  // css路径
  styleUrls: ['./app.component.less']
})

2.NgModule

代码如下（示例）：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  //申明这个模块有哪些组件 这个模块自己的组件
  declarations: [
    AppComponent
  ],
  // 这个模块依赖那些模块
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  //本模块向全局服务中贡献的那些服务的创建器。
  providers: [],
  //根模块用，应用的主视图
  //main.ts中 platformBrowserDynamic().bootstrapModule(AppModule)
  bootstrap: [AppComponent]
})
export class AppModule { }

3.angular组件

4.ng-if

5.ngfor

<li *ngFor="let menu of menus; let i = index; let f = first;let l = last; let even = even;let odd = odd">

6.样式绑定

7.组件生命周期

• constructor    构造函数首先被调用
• ngOnchanges 输入属性变化时被调用  @Input 属性发生变化时候
• ngOnInit 组件初始化时被调用
• ngDoCheck 脏值检测时调用
• ngAfterContentInit 当内容投影ng-content完成时调用   <ng-content>插槽</ng-content>
• ngAfterContentChecked   ng检测投影内容时调用（多次）
• ngAfterViewInit 当组件视图（子视图）初始化完成时调用   操作dom在这里  用Renderer2  操作dom更安全
• ngAfterViewChecked 当检测视图变化时（多次）
• ngOnDestroy 当组件销毁时

8.ViewChild和ViewChildren 引用模板或者视图节点

可以使ng组件 也可使html元素， AfterViewInit中可以安全的使用@ViewChild引用的元素   推荐使用 Renderer2 操作dom元素

<div class="image-slider" #imageSlider>

@ViewChild('imageSlider',{static:true}) imgSlider:ElementRef | undefined;
// static:true 表示静态  如果在 ngif中则 false   

引用多个模板元素时候

<img #img *ngFor="let item of imgs" [src]="item">

ViewChildren可引用复数模板   申明类型为 QueryList<ElementRef>

@ViewChildren('img') imgs:QueryList<ElementRef> | undefined;
  

9.双向绑定ngModel 

formsModule中提供的指令

[(ngModel)] = “变量”形式实现

实质上就是

[ngModle]="name"  (ngModelChange)="name=$event.target.value"

---