Angular6 基础（数据绑定、生命周期、父子组件通讯、响应式编程）

妖狐艹你老母 2022-05-09 02:33 224阅读 0赞

`Angular`相比于`vue`来说，更像一个完整的框架，本身就集成了很多模块，如路由，HTTP，服务等，而vue是需要另外引入比如(vuex，axios等)。Angular引入了依赖注入、单元测试、类等后端概念，结合TS开发，加入类型管理机制，使前端代码也能严谨化，结构化。比起vue，angular更加适用于大型项目的开发与维护。

### 1、项目构建 ###

// 属于全局安装，如果之前装过了，就不用多次执行该命令了~
    npm install -g @angular/cli
    
    // 新建项目(routiong表示加入路由)
    ng new my-app --routing
    
    // 进入项目
    cd my-app
    
    // 安装插件
    npm install (这里之前使用cnpm install 会卡在95%的地方)
    
    // 启动项目
    ng serve
    
    // 设置不同的端口(默认端口4200)
    ng serve --port 5001

### 2、绑定 ###

属性绑定

*  DOM属性：当前值`[property]="value"`，可变，优先使用；可以使用插值表达式双花括号替换

<h4>插值表达式</h4>
    <img src="{
       {imgUrl}}" alt="">
    
    <h4>DOM属性绑定</h4>
    <img [src]="imgUrl" alt="">

// ts代码
    export class BindComponent implements OnInit {
      imgUrl: string = "http://via.placeholder.com/300x100"
    }

![1414921-20180807092342388-2116486610.png][]

*  HTML绑定：初始值`[attr.Attribute]="value"`，不可变，有的HTML属性没有对应的DOM属性，比如colspan，当没有DON属性的时候可使用；
 *  CSS类绑定：全替换`[class]="classValue"`，部分替换`[class.className]="classValue"`

<h4>class属性全绑定</h4>
    <div [class]="allClass">黑玛鱼</div>
    
    <h4>class属性部分绑定</h4>
    <div class="aa" [class.bb]="bbValue">黑玛鱼</div>

.aa {color: red;}
    .bb {font-weight: bold;}
    .cc {font-size: 50px;}

// 字符串类型
      allClass: string = 'aa bb cc';
      // 布尔类型
      bbValue: boolean = true;

![1414921-20180807092358683-104622990.png][]

指令绑定

*  ngFor：循环指令

<h4>ngFor</h4>
    <ul>
      <li *ngFor="let item of list;let i = index">
        第{
       {i+1}}条：{
       {item}}
      </li>
    </ul>

// 数组类型
      list: string[] = ['我的前半生','精彩绝伦','我的后半生','依然绚烂']

![1414921-20180807092416916-1417894266.png][]

*  ngIf：是否渲染dom元素

<h4>ngIf</h4>
    <div>
      <span *ngIf="show">我是显式的</span>
      <span *ngIf="!show">我是隐式的</span>
    </div>

// 布尔类型
      show:boolean = true;

![1414921-20180807092433230-1676469866.png][]

*  ngClass：多类名显示

<h4>ngClass</h4>
    <div  class="aa" [ngClass]="{bb: bbValue}">Angular指令</div>

![1414921-20180807092446361-369356885.png][]

*  事件绑定

// 事件
        todoClick(){
        alert('点我干嘛？')
        }

![1414921-20180807092459794-291720859.png][]

双向绑定

*  \[(ngModel)\]：常用于表单组件

> 这里注意，需要在`app.module.ts`引入表单模块`FormsModule`

管道

管道(过滤)：负责将原始值转成显示值

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>效果</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>date</td> 
   <td>日期的转换：<code>date:'yyyy-MM-dd HH:mm:ss'</code></td> 
  </tr> 
  <tr> 
   <td>number</td> 
   <td>数字的转换：<code>number:'2.1-4'</code>，保留2位整数，最少1个，最多4个</td> 
  </tr> 
  <tr> 
   <td>async</td> 
   <td>异步流</td> 
  </tr> 
  <tr> 
   <td>自定义</td> 
   <td>ng g pipe ...</td> 
  </tr> 
 </tbody> 
</table>

<h4>管道</h4>
    <span>今天是：{
       {today | date:"yyyy-MM-dd"}}</span>

today: object = new Date()

![1414921-20180807092515910-1499000511.png][]

投影

相当于vue的插槽，在ng中使用`ng-content`指令

*  单个投影

<app-child>
        <span>
          两个人在一起 进步快的那个人总是会甩掉原地踏步的那个人 因为人的本能都是希望更多地探求生命生活的外延和内涵
        </span>
    </app-child>

<h4>单个投影</h4>
    <ng-content></ng-content>

![1414921-20180807092613245-1840257188.png][]

*  多个投影  
    使用类`class`命名，使用`select`定位

<app-child>
        <div class="ask">“下次见到她，你会怎么做？”</div>
        <div class="answer">“打个招呼，或者，带她看大海”</div>
    </app-child>

<h4>多个投影</h4>
    朋友问：<ng-content select=".ask"></ng-content>
    他说：<ng-content select=".answer"></ng-content>

![1414921-20180807092644471-1347532347.png][]

### 3、生命周期 ###

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>ngOnChanges</code></td> 
   <td>父组件在初始化或者在修改子组件的输入属性时被调用。引用类型改变，不触发，初始化输入属性</td> 
  </tr> 
  <tr> 
   <td><code>ngDoCheck</code></td> 
   <td>数变更检测(<code>zone.js</code>) 发生的时候被调用，很频繁的被调用，只要视图有变化都会触发</td> 
  </tr> 
  <tr> 
   <td><code>ngAfterViewInit</code></td> 
   <td>模板初始化时调用（一次）</td> 
  </tr> 
  <tr> 
   <td><code>ngAfterViewChecked</code></td> 
   <td>模板变化检测</td> 
  </tr> 
  <tr> 
   <td><code>ngAfterContentInit</code></td> 
   <td>插槽值初始化时调用（一次）</td> 
  </tr> 
  <tr> 
   <td><code>ngAfterContentChecked</code></td> 
   <td>对插槽内容的初始化和变更检测，在视图初始化之前调用。此时可以更改值</td> 
  </tr> 
  <tr> 
   <td><code>ngDestory</code></td> 
   <td>路由切换的时候，前一个组件销毁，后一个组件创建</td> 
  </tr> 
 </tbody> 
</table>

### 4、父子组件通讯 ###

组件创建：ng直接使用 `ng g component` 的命令创建组件，会自动生成组件所需的文件，方便快捷。

// 父组件
    ng g component parent
    // 子组件
    ng g component parent/child

![1414921-20180807092703393-980439262.png][]

父->子（@Input()）

使用 `@Input()` 让子组件知道哪个是输入的属性，对应vue中的props。

<h4>我是父组件</h4>
    <input type="text" [(ngModel)]="tellchild">
    <app-child [message]="tellchild"></app-child>

<h4>我是子组件</h4>
    <div>父组件传来的数据是：{
       {message}}</div>

// 子组件ts，告诉组件，message是父组件传进来的
    @Input() public message: string;

![1414921-20180807092720730-1013554619.png][]

子->父 （@Output()）

依赖`EventEmitter`事件发射器，将信息发射`emit`给子组件

<h4>我是子组件</h4>
    <div>父组件传来的数据是：{
       {message}}</div>
    <input type="text" [formControl]="childmessage">

// 使用FormControl对象，响应式表单需要引入ReactiveFormsModule模块
      childmessage: FormControl = new FormControl();
    
      // 输出属性，需要定义成事件
      @Output() childtellEvent: EventEmitter<any> = new EventEmitter();
    
      ngOnInit() {
        this.childmessage.valueChanges.subscribe(msg => {
          // 通过emit将信息发射出去
          this.childtellEvent.emit(msg);
        })
      }

<h4>我是父组件</h4>
    <input type="text" [(ngModel)]="tellchild">
    <div>子组件传来的数据是：{
       {childmessage}}</div>
    
    <app-child [message]="tellchild" (childtellEvent)="tellResult($event)"></app-child>

![1414921-20180807092746674-1443743500.png][]

### 5、响应式编程 ###

*  可观察对象  
    Angular集成了 [参考：Rxjs][Rxjs]，它使用 `Observable` 对象来创建流，主要是用于监听一组值或者事件的集合

// 创建流
    // 值的创建
    Observable.of([1,2,3,4]);
    // 事件的创建
    var button = document.querySelector('button');
    Observable.fromEvent(button,'click')

*  观察者  
    不是对象，而是一个回调函数集合，它知道如何监听被 Observable 发送的值。通过订阅`subscribe`的方式观察可观察对象，取消订阅`unsubscribe()`

// 订阅流
    Observable.from([1,2,3,4]).map(item =>{
        item * item
    }).subscribe(
        // next检测
        res => console.log(res),
    
        // error检测
        err => console.log(err),
    
        // complete检测
        () => console.log('it`s over')
    )

[1414921-20180807092342388-2116486610.png]: /images/20220509/249486149fc74583a6e51e0be702416f.png
[1414921-20180807092358683-104622990.png]: /images/20220509/cfd51bd1fbf041b7a80d8573a1e23af2.png
[1414921-20180807092416916-1417894266.png]: /images/20220509/fa969e5730ff419aaea8e42a86f6d892.png
[1414921-20180807092433230-1676469866.png]: /images/20220509/21024def941c4aca86de4e4a62f31fa4.png
[1414921-20180807092446361-369356885.png]: /images/20220509/15500f925bd04bfa94a134c533d0be80.png
[1414921-20180807092459794-291720859.png]: /images/20220509/70aa998f2ce342a5a34851539af25dbe.png
[1414921-20180807092515910-1499000511.png]: /images/20220509/f675a0060ecc4e14ba0efea5a6095e53.png
[1414921-20180807092613245-1840257188.png]: /images/20220509/3678f081573d4a9cacf4d0edc7eeb514.png
[1414921-20180807092644471-1347532347.png]: /images/20220509/9cb01240425c41408433ffefb7dc770c.png
[1414921-20180807092703393-980439262.png]: /images/20220509/6ae7297e1c7340afb3a102ade9fa3b47.png
[1414921-20180807092720730-1013554619.png]: /images/20220509/c997675beb4a4f1fb588471e56847019.png
[1414921-20180807092746674-1443743500.png]: /images/20220509/dc99dfff82d54f6d8fce0440f110fa12.png
[Rxjs]: https://cn.rx.js.org/manual/overview.html#observable-