Angular学习笔记--基础语法

Wizi
202 阅读4分钟

/# angular 项目

基本语法

文字插值

  1. 使用文字插值的格式，利用{{}} 插值语法可以直接在html上展示变量、 // 直接在标签之间
<div>{{属性}}</div>

// 在标签的属性后面

<div class="{{class1}}" >{{属性}}</div>

属性的变量绑定

  1. [属性名]="属性值" // 绑定属性
  2. [attr.abc]="属性" // 添加属性

事件的绑定

  1. (事件名称)="Fn()"
  2. (事件名称)="Fn($event)" // 获取事件的参数

class和style的绑定

  1. class的绑定 a. 单一类别绑定 [class.类名]="" // boolean | undefined | null b. 多重类别绑定 [class]="'class1','class2'" [class]="{类别:boolean,类别2：boolean}" [class]="['类别1'，'类别2']"

  2. style的绑定 a. 单一样式的绑定 [style.width]="'50px'" [style.font-size]="'5em'" [style.fontSize]="'6em'" [style.font-size.px]="60" // 单一样式带单位的 b. 多样式的绑定 [style]="'style1','style2'" [style]={width:'20px',height:'60px'} [style]=['style1','style2']

内置指令的介绍

  1. ngFor 循环指令
// 基础用法
<h1 *ngFor="let item of list">{{item}}</h1>
// 获取索引
<h1 *ngFor="let item of list;let i=index">{{item}}</h1>
  1. ngIf 判断指令
<input *ngIf="visible" />
<label (click)="visible=true" >展示</label>

<script>
let visible:boolean=false;
</script>

3.ngNodel 绑定属性值

// 先从@angular/forms之中导入FormsModel

<input [(ngModel)]="value"/>
// [(ngModel)] 做了两件事先帮绑定数值 再绑定事件 进行双向绑定

<script>
    let value=123
</script>

4.ngSwitch 指令

<div [ngSwitch]="obj.value">
    <span *ngSwitch="'1'">1</span>
    <span *ngSwitch="'2'">2</span>
    <span *ngSwitch="'3'">3</span>
    <span *ngSwitch="'4'">4</span>
</div>

获取元素

  1. #符号获取元素
// #toInput 获取当前元素
// keyup.enter 事件过滤
// toDo(toInput.value) 获取当前元素绑定的值
<input #toInput (keyup.enter)="toDo(toInput.value)" />

// 清空当前元素的值 ????
<input #toInput (keyup.enter)="toDo(toInput.value);toInput.value=''" />

TypeScript的类型定义

  1. 类型的定义
// insterface 定义类型 （推荐）
// 不会被打包转换，仅用于开发阶段
export interface toDo{
    state:boolean,
    type:string
}

// class定义类型
// 会被打包转换为js语法
export class toDo1{
    status:boolean=false;
    type:string;
    constructor(_type:string,_status:boolean=false){
         this.type=_type;
         this.status=_status
    }
}

管道（过滤器）

  1. 管道的语法 {{value | pipe管道}} // 常用的内置管道 a. date b. upperCase c. lowerCase d. currency 数值转换为货币，更具本地环境中规则格式化 e. decimal 数字转化为小数 f. percent 数字转换为百分比 g. json 转为json字符串

使用HTTP进行和后端的通讯

  1. 从@angular/common/http导入HttpClientModule模块并注入
  2. 在ts文件中进行使用
// 实例
export interface TODo{
    type:boolean,
    str:string
}
export class AppComponents implements OnInit{
    // 注入http服务
    constructor(private http:HttpClent){
    }

    // 初始化init生命周期
    ngOnInitr():viod{
        // 发起http请求.get请求
        // 1. get请求
        // 2. url后端的接口地址
        // 3. subscribe订阅接口的返回值
        this.http.get<ToDo[]>("url").subscribe(resp => {
            console.log(resp)
        })
    }

}

  1. 请求的代理 a. 在src文件下新建proxy.conf.json文件设置代理

    
    {
        "/api":{
            "target:"htps://lacalhost:7200",
            "secure":false,
            "changeOrigin":true
        }
    }

  2. 在cli的配置文件angular.json中添加选项 //1. 新增选项proxyConfig

    
    {
        "architect":{
            "serve":{},
            "builder":"@angular-sevkit/build-angule:dev-server",
            "options":{
                "browserTarget":"your-application-name:build",
                "proxyConfig":"src/proxy.conf.json"
                }
            
        }
    
    }

    // 2. 在script中新增参数

  3. post新增

// 直接请求
 this.http.post("url",params).subscribe(() => { this.getList()})

// 后端配合返回新增的项
 this.http.post<ToDo>("url",params).subscribe((data) => { this.list.push(data)})

利用service进行代码的分割

原因：
1.共用性
2.单一职责，单一的逻辑拆分维护
3.业务逻辑的单独拆分
  1. service的实例
// test.service.ts
import {Injectable} from "@angular/core";

// 拆分数据层
@Injectable({
    providedIn:"root"
})
export class TestService {
    num:number=0;
    constructor(){}
    add():void{
        this.num++;
    }，
    // 开发中一般对应的是ajax请求
    getNum():number{
        return this.num
    }
}

// componets.ts
export class TestComponents{
    number:number=0;
    // 依赖注入
    constructor
    (
        provate testService:TestService
    ){}

    // 使用service获取数据
     ngOnInit():void{
        this.number = this.testService.getNum()
    }
}

component的基本概念

  1. ngOnChanges

  2. ngOnInit 组件的初始化，只调用一次

  3. ngDoCheck 检测。

  4. ngAfterContentInit 第一次调用ngDoCheck的时候调用，只调用一次

  5. ngAfterContentChecked 视图发生改变的时候调用，更新完成

  6. ngAfterViewInit 初始化视图更新完成之后调用

  7. ngAfterViewChecked 视图更新完成之后调用

  8. ngOnDestory 组件销毁之后之前调用

调用的顺序如下：

OnChanges数据绑定--->OnInit初始化（一次）--->DoCheck更新检测--->AfterContentInit初次完成数据流之后（一次）--->AfterContentChecked组件内数据更新完成之后--->AfterViewInit视图组件及子组件加载完成（一次）--->AterViewChecked视图或子组件视图发生变更--->Docheck更新检测-->AfterContentChecked组件数据更新完成-->AfterViewChecked组件视图更新完成-->OnDestory组件销毁之前

组件的通讯

父子传值

父组件：通过属性绑定的方式向子组件传递数值

<child [data]="666">子组件</child>

子组件：通过@Input装饰器接受父组件传递的数值

@Input() data?:number; // 接收数据
@Input("num") data=""  // 指定别名

子父传值

子组件：通过@Output装饰器弹射事件

// 事件名称自定义 
// new 的是事件类型
// 事件发射的数据的类型
@Output() 事件名=new EventEmitter<Boolean>();


// 事件的发射
handleBtn(value:boolean):void{
// value 发射的参数
this.事件名.emit(value)   
}

父组件：


<!-- 父组件通过子组件的自定义事件名称监听事件 -->
<!-- 通过自己的处理函数接受$event参数 -->
<child (事件名)="父组件的处理事件($event)"></child>

双向的数据绑定

子组件：弹射事件

@Input() data!:number; // 接收数据
@Output() dataChange=new EventEmitter<number>();// 更新数据

父组件：直接双向绑定该数据


<!-- 之直使用双向的数据绑定 -->
<child [(data)]="data">子组件</child>

使用services进行组件之间的数据通讯

  1. 组件之间都引入同一个services，借由同一个数据服务商来进行组件的通讯，类似有mixin。

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

父组件：使用@viewChild装饰器获取子组件的方法


// 通过装饰器获取子组件
@viewChild(ChildComponent)
private childComponent!:ChildComponent

// 使用子组件的公开的方法或者属性
fu():viod{
  this.childComponent.show()
}

````/# angular 项目

## 基本语法

### 文字插值

1. 使用文字插值的格式，利用{{}} 插值语法可以直接在html上展示变量、
// 直接在标签之间

```html
<div>{{属性}}</div>
```

// 在标签的属性后面

```html
<div class="{{class1}}" >{{属性}}</div>
```

### 属性的变量绑定

1. [属性名]="属性值" // 绑定属性
2. [attr.abc]="属性" // 添加属性

### 事件的绑定

1. (事件名称)="Fn()"
2. (事件名称)="Fn($event)" // 获取事件的参数

### class和style的绑定

1. class的绑定
 a. 单一类别绑定
    [class.类名]="" // boolean | undefined | null
 b. 多重类别绑定
    [class]="'class1','class2'"
    [class]="{类别:boolean,类别2：boolean}"
    [class]="['类别1'，'类别2']"

2. style的绑定
 a. 单一样式的绑定
    [style.width]="'50px'"
    [style.font-size]="'5em'"
    [style.fontSize]="'6em'"
    [style.font-size.px]="60" // 单一样式带单位的
 b. 多样式的绑定
    [style]="'style1','style2'"
    [style]={width:'20px',height:'60px'}
    [style]=['style1','style2']

### 内置指令的介绍

1. ngFor 循环指令

```html
// 基础用法
<h1 *ngFor="let item of list">{{item}}</h1>
// 获取索引
<h1 *ngFor="let item of list;let i=index">{{item}}</h1>

```

2. ngIf 判断指令

```html
<input *ngIf="visible" />
<label (click)="visible=true" >展示</label>

<script>
let visible:boolean=false;
</script>

```

3.ngNodel 绑定属性值

```html
// 先从@angular/forms之中导入FormsModel

<input [(ngModel)]="value"/>
// [(ngModel)] 做了两件事先帮绑定数值 再绑定事件 进行双向绑定

<script>
    let value=123
</script>
```

4.ngSwitch 指令

```html
<div [ngSwitch]="obj.value">
    <span *ngSwitch="'1'">1</span>
    <span *ngSwitch="'2'">2</span>
    <span *ngSwitch="'3'">3</span>
    <span *ngSwitch="'4'">4</span>
</div>

```

### 获取元素

1. #符号获取元素

```html
// #toInput 获取当前元素
// keyup.enter 事件过滤
// toDo(toInput.value) 获取当前元素绑定的值
<input #toInput (keyup.enter)="toDo(toInput.value)" />

// 清空当前元素的值 ????
<input #toInput (keyup.enter)="toDo(toInput.value);toInput.value=''" />
```

### TypeScript的类型定义

1. 类型的定义

```js
// insterface 定义类型 （推荐）
// 不会被打包转换，仅用于开发阶段
export interface toDo{
    state:boolean,
    type:string
}

// class定义类型
// 会被打包转换为js语法
export class toDo1{
    status:boolean=false;
    type:string;
    constructor(_type:string,_status:boolean=false){
         this.type=_type;
         this.status=_status
    }
}
```

### 管道（过滤器）

1. 管道的语法
{{value | pipe管道}}
// 常用的内置管道
 a. date
 b. upperCase
 c. lowerCase
 d. currency 数值转换为货币，更具本地环境中规则格式化
 e. decimal 数字转化为小数
 f. percent  数字转换为百分比
 g. json 转为json字符串

### 使用HTTP进行和后端的通讯

1. 从@angular/common/http导入HttpClientModule模块并注入
2. 在ts文件中进行使用

```typescript
// 实例
export interface TODo{
    type:boolean,
    str:string
}
export class AppComponents implements OnInit{
    // 注入http服务
    constructor(private http:HttpClent){
    }

    // 初始化init生命周期
    ngOnInitr():viod{
        // 发起http请求.get请求
        // 1. get请求
        // 2. url后端的接口地址
        // 3. subscribe订阅接口的返回值
        this.http.get<ToDo[]>("url").subscribe(resp => {
            console.log(resp)
        })
    }

}

```

3. 请求的代理
    a. 在src文件下新建proxy.conf.json文件设置代理

    ```json proxy.conf.json

        {
            "/api":{
                "target:"htps://lacalhost:7200",
                "secure":false,
                "changeOrigin":true
            }
        }

    ```

4. 在cli的配置文件angular.json中添加选项
    //1. 新增选项proxyConfig

    ```jsoin angular.json

        {
            "architect":{
                "serve":{},
                "builder":"@angular-sevkit/build-angule:dev-server",
                "options":{
                    "browserTarget":"your-application-name:build",
                    "proxyConfig":"src/proxy.conf.json"
                    }
                
            }
        
        }

    ```

    // 2. 在script中新增参数

5. post新增

```ts
// 直接请求
 this.http.post("url",params).subscribe(() => { this.getList()})

// 后端配合返回新增的项
 this.http.post<ToDo>("url",params).subscribe((data) => { this.list.push(data)})
```

### 利用service进行代码的分割

    原因：
    1.共用性
    2.单一职责，单一的逻辑拆分维护
    3.业务逻辑的单独拆分

1. service的实例

```js
// test.service.ts
import {Injectable} from "@angular/core";

// 拆分数据层
@Injectable({
    providedIn:"root"
})
export class TestService {
    num:number=0;
    constructor(){}
    add():void{
        this.num++;
    }，
    // 开发中一般对应的是ajax请求
    getNum():number{
        return this.num
    }
}
```

```js
// componets.ts
export class TestComponents{
    number:number=0;
    // 依赖注入
    constructor
    (
        provate testService:TestService
    ){}

    // 使用service获取数据
     ngOnInit():void{
        this.number = this.testService.getNum()
    }
}


```

### component的基本概念

<!-- 生命周期钩子 -->

1. ngOnChanges

2. ngOnInit  组件的初始化，只调用一次

3. ngDoCheck  检测。

4. ngAfterContentInit 第一次调用ngDoCheck的时候调用，只调用一次

5. ngAfterContentChecked 视图发生改变的时候调用，更新完成

6. ngAfterViewInit 初始化视图更新完成之后调用

7. ngAfterViewChecked 视图更新完成之后调用

8. ngOnDestory 组件销毁之后之前调用

调用的顺序如下：

OnChanges数据绑定--->OnInit初始化（一次）--->DoCheck更新检测--->AfterContentInit初次完成数据流之后（一次）--->AfterContentChecked组件内数据更新完成之后--->AfterViewInit视图组件及子组件加载完成（一次）--->AterViewChecked视图或子组件视图发生变更--->Docheck更新检测-->AfterContentChecked组件数据更新完成-->AfterViewChecked组件视图更新完成-->OnDestory组件销毁之前

### 组件的通讯

#### 父子传值

父组件：通过属性绑定的方式向子组件传递数值

````html
<child [data]="666">子组件</child>

子组件：通过@Input装饰器接受父组件传递的数值

@Input() data?:number; // 接收数据
@Input("num") data=""  // 指定别名

子父传值

子组件：通过@Output装饰器弹射事件

// 事件名称自定义 
// new 的是事件类型
// 事件发射的数据的类型
@Output() 事件名=new EventEmitter<Boolean>();


// 事件的发射
handleBtn(value:boolean):void{
// value 发射的参数
this.事件名.emit(value)   
}

父组件：


<!-- 父组件通过子组件的自定义事件名称监听事件 -->
<!-- 通过自己的处理函数接受$event参数 -->
<child (事件名)="父组件的处理事件($event)"></child>

双向的数据绑定

子组件：弹射事件

@Input() data!:number; // 接收数据
@Output() dataChange=new EventEmitter<number>();// 更新数据

父组件：直接双向绑定该数据


<!-- 之直使用双向的数据绑定 -->
<child [(data)]="data">子组件</child>

使用services进行组件之间的数据通讯

  1. 组件之间都引入同一个services，借由同一个数据服务商来进行组件的通讯，类似有mixin。

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

父组件：使用@viewChild装饰器获取子组件的方法


// 通过装饰器获取子组件
@viewChild(ChildComponent)
private childComponent!:ChildComponent

// 使用子组件的公开的方法或者属性
fu():viod{
  this.childComponent.show()
}
avatar
文章
阅读
粉丝