angular 基础

angular基础学习

一、angular属性声明

1. public，（默认）在类，子类，以及类外都可以使用

2. protected，只能在类及其子类中使用

3. private，只能在当前类中使用

4. 改变属性的值：在constructor中改变属性的值例如

   public name:string = "杨超越"
   constructor() {
    	this.name = "ycy" 
    }//这样就改变了属性name的值
   

5. 绑定属性：在html文件中，对标签中增加动态的绑定

   <div [title]="string"> </div>  为div标签动态绑定title
   

6. 模板中绑定html

   public h:any = "<h>希望引用此数据时可以解析为html语句</h>"
   
   <div>
   {{h}} //这样会直接将全部的内容显示出来：<h>希望引用此数据时可以解析为html语句</h>
   </div>
   
   <div [innnerHTML] = "h"></div>
   

7. angular的HTML文件中允许一些简单的运算

   99+1={{99+1}} 前端会显示99+1=100
   

8. *ngFor定义和渲染数组

   //定义数组
   public arr = ['1','2','3']
   public arr:Array<any> = ['1','2','3']//里面元素的内容可以是any
   public arr:number[] = ['1','2','3']//里面元素的内容只能是number
   //在HTML文件中引入数据
   <div *ngFor="let row of alarm">
      {{row._source.title}}
   </div>
   

9. 获取循环数据的索引值

   <div *ngFor="let row of alarm; let key= index;">
    {{key}}:  {{row._source.title}}
   </div>
   

10. *ngIf

    条件判断语句

11. *ngSwitch

12. 动态属性绑定**[ngClass]，[ngStyle]**，使用遍历元素时，使用[ngclass]对某个元素绑定class

    <div *ngFor="let row of alarm; let key= index;" [ngclass]={"'red':key=0">
        //这样可以实现对序列中的某一个绑定特殊class
     {{key}}:  {{row._source.title}}
    </div>
    

    使用[ngStyle]对某个元素做样式动态绑定

    public attr:string = 'red'
    <p [ngStyle]="{'color': attr}">这个标签字体会变红</p>
    

13. 管道

    管道也是一种方法，可以使用angular自带的管道，也可以自定义管道

    转换日期格式

    public today:any= new Date();
    

二、执行事件

1. 执行事件获取属性值，改变属性值

2. 事件对象

   事件执行放在()里引用

   <input type="text" (keydown)="keyDown">//这样可以获取键盘按下的值<input type="text" (keydown)="keyDown($event)">//这样可以把按键盘做成一个事件$event
   

   //在.component.ts文件上就可以使用使用keyDown()函数来获取事件keyDown(e){//e就是事件对象    console.log(e.keycode)//获取键盘按下的值    console.log(e.target)//获取当前dom对象}
   

3. keyup，keydown，keypress

   keydown和keypress获取的是键按下的动作，例如需要获取输入的中文，最终就无法去

4. 双向数据绑定

   数据的双向绑定也叫MVVM，改变model值，view也会改变；改变view值，model值会改变。

   import {FormsModel} from 'angular/forms'//首先引入模型@NgModel的imports{}里声明模型 就可以正常使用<input ([ngModel])="keywords">//类似于Vue的v-model
   

<input  *ngFor="let item in " >

二、angular服务以及实现数据持久化

创建服务可以使模块之间相互引用彼此的方法。

1. 创建方法

   ng g services 目录/服务名

2. 在根组件app.model.ts中声明这个服务

   import {服务方法} from "服务路径"@ngmodel 的 provider方法中，也需要引入
   

3. 在组件中使用服务中的推荐方法

   1.contruter(public a: 服务方法)
   

4. localStorage实现数据持久化

   localStorage.setItem(key, value)JSON.stringify(value)，将value转化为jsonJSON.parse(text) 将json对象转化为javasrcipt对象
   

三、angular数据请求

1. get请求

2. post请求

3. jsonp请求，支持跨域

4. axios第三方模块请求

   使用promise对axios进行封装或者使用rejx进行封装

四、跳转页面传值

1. get传值

   首先使用get做传值<a [routerLink]="['/news']" [queryParams]="{aid:123}"></a>
   

   其次使用activateRouter做参数的接收，
   

2. 动态路由

   在app.router.ts中输入动态路由，

   {path:'news/:aid', component:news}//这样可以创建动态的url
   

   <a [routerLink]="['/news/', key ]"></a>//由于动态路由的设置，直接就可以把key值赋给aid
   

3. js做跳转页面