angular webstorm不提示ngfor_Angular学习笔记（2）

对于上篇文章，各位大佬的评论都看到了，特意去查看了一下Angualr和AngualrJS的区别，在此说声抱歉，让有些人对此有了误区，感谢对我写的文章提出意见的大佬们，我也会积极的改正的，话不多，正题开始：

一、指令类型

注意：每个宿主元素只能有一个结构型指令--例如*ngIf和*ngFor不能放一起

类型分为3种：

1、 组件--拥有模板的指令
2、 结构型指令--通过删除和增加DOM元素改变DOM布局的指令
3、 属性型指令--改变元素、组件、或其他指令的外观和行为的组件

• 组件---最常见
• 结构型指令---ngfor/ngif/ngswitch

*ngif 判断值是否应该存在，若不存在，直接在DOM树中删除，若存在，再在DOM数中添加上去

*ngfor 代表着循环，跟Vue中的v-for相同，只是，写法上不一样

<

• 属性型指令---ngstyle ngclass

*作用，属于语法糖的一种，*ngIf相当于下列语法

<ng-template [ngIf]="">
    <div>语法</div>
</ng-template>

二、路由基本配置----------app.modlue.ts(这里配置路由)

1、引入Angualr路由并且进行注册

import { Routes, RouterModule } from '@angular/router' 
RouterModule.forRoot(appRoutes),//初始化路由，并让他监听浏览器的变化

2、引入页面中ts定义的类名(建议唯一值)

import { HomepageComponent } from './homepage/homepage.component'

3、在@NgModule中的declarations中进行注册

@NgModule({
 declarations: [
    HomepageComponent,
 ],
 imports: [
 RouterModule.forRoot(appRoutes),//初始化路由，并让他监听浏览器的变化
 BrowserModule,
 FormsModule
  ],
 providers: [],  
 bootstrap: [AppComponent]
})

4、定义路由结构如下

const appRoutes: Routes = [
  {path:"",component:HomepageComponent},
  {path:"father",component:FatherComponent},
  {path:"son",component:SonComponent},
  {path:"phome",component:ZhomeComponent},
  { path: "**", component:UNComponent}, //"**"代表着访问任何没有定义的界面
]

5、在写路由顺序的时候，一定要吧**放在最后面，因为，**代表所有路径，这里常用于放置404组件，""代表着刚上来页面刚刚打开时候的顺序

6、路由懒加载

{     
   path: 'customers',     
   loadChildren: () => import('./customers/customers.module').
   then(m => m.CustomersModule) 
},

7、路由跳转+传值

this.router.navigate(['/father'],{
     queryParams:{
       id:"5"     
     } 
})

8、获取路由参数

this.ActivatedRoute.queryParams.subscribe(e=>{
       console.log(e.id) 
})

三、NgModule模块--------app.modlue.ts

作用：用于配置注入器和编译器，并把这些东西组织在一起

@NgModule({   
   declarations: [], //该应用所拥有的组件   
   imports: [],//导入 BrowserModule 以获取浏览器特有的服务,//比如 DOM 渲染、无害化处理和位置   
   providers: [],//各种服务提供者。   
   bootstrap: [AppComponent]//根组件，Angular创建它并插入index.html宿主页面。 
})

四、管道---过滤器

管道是对字符串、货币金额、日期、和其他显示数据进行转换和格式化，管道是简单的函数，用于接收值，并返回转换的值。简单概括就是----------过滤器

Angular提供的内置管道

• 1、DatePipe：根据本地环境中的规则格式化日期值。
• 2、UpperCasePipe：把文本全部转换成大写。
• 3、LowerCasePipe ：把文本全部转换成小写。
• 4、CurrencyPipe ：把数字转换成货币字符串，根据本地环境中的规则进行格式化。
• 5、DecimalPipe：把数字转换成带小数点的字符串，根据本地环境中的规则进行格式化。
• 6、PercentPipe ：把数字转换成百分比字符串，根据本地环境中的规则进行格式化。

1、根据时间戳去过滤

<div>{{tody|data:"yyyy-MM-dd HH:mm:ss"}}</div> 

2、四舍五入到小数位--保留两位小数最多（案例）

<div>{{p | number:'1.0-2'}}</div> 

3、过滤切割---保留前3位，切割后四位

{{semlinker|slice:0:3 }}***{{semlinker|slice:7:11}}
例如 13012345600就变成了130***5600

五、生命周期

01、constructor()

构造函数执行了，除了使用简单的值对局部变量进行初始化，其他的什么都不做

详解：

constructor来初始化类，Angular中的组件是基于class类去进行实现的，在Angular中，constructor用于注入依赖，组件的构造函数会在所有的生命周期钩子之前被调用，它主要用于注入依赖或执行简单的数据初始化的操作

1、ngOnChanges()

当被绑定的输入属性的值发生变化时调用(父子组件传值的时候会触发

详解：

当Angular(重新)设置数据绑定输入时响应。该方法当被绑定输入属性的值发生变化时候调用，首次调用一定会在ngOnInit()之前。

2、ngOnInit()

请求数据一般放在这个里面

详解：

在Angular第一次显示数据绑定和设置指令/组件的输入属性后，初始化指令和组件在第一轮ngOnChanges()完成后调用，只调用一次，可以请求数据

3、ngDoCheck()

检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应

详解：

检测，并在发生Angular无法或不愿意自己检测的变化时做出反应，在每个Angular变更检测周期中调用

4、ngAfterContentInit()

当把内容投影进组件之后调用

详解：

当把内容投影进组件之后调用。第一次 ngDoCheck() 之后调用，只调用一次

5、ngAfterContentChecked()

每次完成被投影组件内容的变更检测之后调用

详解：

每次完成被投影组件内容的变更检测之后调用。 ngAfterContentInit() 和每次 ngDoCheck() 之后调

6、ngAfterViewInit()

初始化完组件视图及其子视图之后调用（dom操作放在这个里面）

详解：

初始化完组件视图及其子视图之后调用。第一 次 ngAfterContentChecked() 之后调用，只调用一次。在这里可以操作DOM

7、ngAfterViewChecked()

每次做完组件视图和子视图的变更检测之后调用

详解：

每次做完组件视图和子视图的变更检测之后调用。 ngAfterViewInit()和每次 ngAfterContentChecked() 之后 调用。

8、ngOnDestroy()

组件被销毁

详解：

当 Angular 每次销毁指令/组件之前调用并清扫。在这儿反订阅可观察对象和分离事件处理器，以防内存泄 漏。在 Angular 销毁指令/组件之前调用。比如：移除事件监听、清除定时器、退订 Observable 等。