前端框架angular学习笔记（一）

   前言：Angular 是一个用 HTML 和 JavaScript 或者一个可以编译成 JavaScript的语言（例如 Dart 或者 TypeScript ），来构建客户端应用的框架。（摘抄自angular中文文档）正文：（1）数据绑定：  要显示组件的属性，最简单的方式就是通过插值表达式(interpolation) 来绑定属性名。 要使用插值表达式，就把属性名包裹在双花括号里放进视图模板，如

{{myHero}}

。数据方向：单向从数据源到视图目标{{expression}}[target]="expression"bind-target="expression"数据流向为从右向左。单向从视图目标到数据源(target)="statement"on-target="statement"，数据流向为从左向右，一般事件都通过此方式进行实现，如：（click）="statement"。双向数据流：[(target)]="expression"bindon-target="expression"，数据流为双向，在数据源和视图之间双向传递。一般input等标签需要用到这种绑定方式。（2）指令：1.*ngIf指令：通过把

NgIf

指令应用到元素上（称为宿主元素），我们可以往DOM中添加或从DOM中移除这个元素。（我理解的含义就是html中的if判断）。2.*ngFor指令：

NgFor

是一个重复器指令—— 自定义数据显示的一种方式。 我们的目标是展示一个由多个条目组成的列表。首先定义了一个 HTML 块，它规定了单个条目应该如何显示。 再告诉 Angular 把这个块当做模板，渲染列表中的每个条目。例如：

*ngFor="let item of list ;let i = index;"（我所理解的就是html页面中的for循环遍历集合）

3.ngSwitch指令：

NgSwitch

指令类似于JavaScript的

switch

语句。 它可以从多个可能的元素中根据switch条件来显示某一个。 Angular只会把选中的元素放进DOM中。

NgSwitch

实际上包括三个相互协作的指令：

NgSwitch

、

NgSwitchCase

 和 

NgSwitchDefault

，例子如下：<div [ngSwitch]="currentHero.emotion"> <app-happy-hero *ngSwitchCase="'happy'" [hero]="currentHero"></app-happy-hero> <app-sad-hero *ngSwitchCase="'sad'" [hero]="currentHero"></app-sad-hero> <app-confused-hero *ngSwitchCase="'confused'" [hero]="currentHero"></app-confused-hero> <app-unknown-hero *ngSwitchDefault [hero]="currentHero"></app-unknown-hero></div>我所理解的就是html中的switch语句。（3）生命周期钩子：指令和组件的实例有一个生命周期：新建、更新和销毁。 通过实现一个或多个Angular 

core

库里定义的生命周期钩子接口，开发者可以介入该生命周期中的这些关键时刻。每个接口都有唯一的一个钩子方法，它们的名字是由接口名再加上

ng

前缀构成的。比如，

OnInit

接口的钩子方法叫做

ngOnInit

， Angular在创建组件后立刻调用它，需要值得注意的是，生命周期钩子只在程序运行完之后第一时间执行里面的操作，且只执行一次。（4）组件之间的交互：装饰器一：import{Component,Input}from'@angular/core';即@Input()装饰器。我所理解和使用的@Input()装饰器：通常我们把具有属性的对象放到父组件里，父组件通过调用子组件的模板，例如：

<ai-reqtmp-market-base-two [reqtmptopic]="reqtmptopic" [reqtmpMarket]="reqtmpMarket" *ngIf="reqtmpMarket && reqtmpMarket.arm_id"></ai-reqtmp-market-base-two>

的模板绑定句型，传递给子组件，子组件通过@Input()这个装饰器，通过@Input() reqtmpMarket;@Inp

ut() reqtmptopic ;这种方式引入父组件传递过来的对象，然后通过对象名.属性名来调用父组件传递过来的属性。

装饰器二：

import {Component, OnInit, Output, EventEmitter} from '@angular/core';中的@Output（）标签，

子组件暴露一个

EventEmitter

属性，当事件发生时，子组件利用该属性

emits

(向上弹射)事件。父组件绑定到这个事件属性，并在事件发生时作出回应。子组件的

EventEmitter

属性是一个输出属性，通常带有@Output装饰器。例如：父组件中页签切换功能的实现：

this.onSubmitSuccess.emit(2);

@Output() onSubmitSuccess = new EventEmitter();

通过这种方式子组件向父组件发送一个2，而在父组件中通过

<ai-reqtmp-market-base [reqtmptopic]="reqtmptopic" [reqtmpMarket]="reqtmpMarket" (onSubmitSuccess)="onBaseSuccess($event)" *ngIf="reqtmpMarket"></ai-reqtmp-market-base>

来监听子组件发送过来的2，用单向数据流绑定方式，使数据流由

onSubmitSuccess传递到

onBaseSuccess($event)里面来

父组件通过

onBaseSuccess(onSubmitSuccess) {this.nav = onSubmitSuccess;}

这样的函数即完成了页签切换的功能。