• 技术文章 >web前端 >js教程

    浅谈Angular中的变化检测(Change Detection)

    青灯夜游青灯夜游2021-02-22 17:48:24转载96
    本篇文章我们来了解一下Angular中的变化检测(Change Detection)。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

    相关推荐:《angular教程

    ChangeDection

    检测程序内部状态,然后反映到UI上。

    引起状态变化,引发检查的驱动源:Events,XHR,Timers

    ApplicationRef监听NgZone的onTurnDone,然后执行检测。

    OnPush状态完全由外部决定,内部不会去更改状态。

    例子:

    聪明组件project-list变成OnPush检查策略,

    在需要检测时候使用cd.markForCheck).

    @Component({
      selector: "app-project-list",
      templateUrl: "./project-list.component.html",
      styleUrls: ["./project-list.component.scss"],
      animations:[
        slideToRight,listAnimation
      ],  changeDetection: ChangeDetectionStrategy.OnPush})

    手动告诉Angualr你来检查我

    在事件发生的时候主动告诉Angular来检查这条路线。

    import { Component, OnInit , HostBinding, ChangeDetectionStrategy, ChangeDetectorRef } from "@angular/core";
    import { MatDialog } from "@angular/material";
    import { NewProjectComponent } from "../new-project/new-project.component";
    import { InviteComponent } from '../invite/invite.component';
    import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
    import {slideToRight} from '../../animate/router.animate'import { listAnimation } from '../../animate/list.animate';
    import { projection } from '@angular/core/src/render3';
    
    @Component({
      selector: "app-project-list",
      templateUrl: "./project-list.component.html",
      styleUrls: ["./project-list.component.scss"],
      animations:[
        slideToRight,listAnimation
      ],  changeDetection: ChangeDetectionStrategy.OnPush})
    export class ProjectListComponent implements OnInit {
      @HostBinding('@routeAnim') state;
    
      projects = [
        {
          id:1,
          name: "企业协作平台",
          desc: "这是一个企业内部项目",
          coverImg: "assets/images/covers/0.jpg"
        },
        {
          id:2,
          name: "自动化测试项目",
          desc: "这是一个企业内部项目",
          coverImg: "assets/images/covers/2.jpg"
        }
      ];
      constructor(private dialog: MatDialog, private cd:ChangeDetectorRef) { }
    
      ngOnInit() { }
    
      openNewProjectDialog() {    // this.dialog.open(NewProjectComponent,{data:'this is a dialog'});
        const dialogRef = this.dialog.open(NewProjectComponent, {
          data: { title: '新建项目' }
        });
        dialogRef.afterClosed().subscribe((result) => {
          console.log(result);      this.projects = [...this.projects, 
            {id:3,name:'一个新项目',desc:'这是一个新项目',coverImg:"assets/images/covers/3.jpg"},
            {id:4,name:'又一个新项目',desc:'这是又一个新项目',coverImg:"assets/images/covers/4.jpg"}]
        });    this.cd.markForCheck();
      }
    
      lauchInviteDialog() {
        const dialogRef = this.dialog.open(InviteComponent);
      }
    
      lauchUpdateDialog() {
        const dialogRef = this.dialog.open(NewProjectComponent, {
          data: { title: '编辑项目' }
        });
      }
    
      lauchConfimDialog(project) {
        const dialogRef = this.dialog.open(ConfirmDialogComponent, {
          data: { title: '删除项目', content: '您确认删除该项目吗?' }
        });
        dialogRef.afterClosed().subscribe(result=>{
          console.log(result);      this.projects=this.projects.filter(p=>p.id!=project.id);      this.cd.markForCheck();
        });
      }
    }

    把笨组件标识为OnPush

    直接加changeDetection:ChangeDetectionStrategy.OnPush

    @Component({
      selector: 'app-new-project',
      templateUrl: './new-project.component.html',
      styleUrls: ['./new-project.component.scss'],  changeDetection:ChangeDetectionStrategy.OnPush})

    ChangeDetectorRef

    export abstract class ChangeDetectorRef {
      abstract markForCheck(): void;
      abstract detach(): void;
      abstract detectChanges(): void;
      abstract reattach(): void;
    }<br>
    markForCheck() - 当输入已更改或视图中发生了事件时,组件通常会标记为脏的(需要重新渲染)。调用此方法会确保即使那些触发器没有被触发,也仍然检查该组件。<br>在组件的 metadata 中如果设置了 changeDetection: ChangeDetectionStrategy.OnPush 条件,那么变化检测不会再次执行,除非手动调用该方法。
    detach() - 从变化检测树中分离变化检测器,该组件的变化检测器将不再执行变化检测,除非手动调用 reattach() 方法。
    reattach() - 重新添加已分离的变化检测器,使得该组件及其子组件都能执行变化检测
    detectChanges() - 从该组件到各个子组件执行一次变化检测 检查该视图及其子视图。与 <a href="https://angular.cn/api/core/ChangeDetectorRef#detach">detach</a> 结合使用可以实现局部变更检测。

    更多编程相关知识,请访问:编程入门!!

    以上就是浅谈Angular中的变化检测(Change Detection)的详细内容,更多请关注php中文网其它相关文章!

    本文转载于:博客园,如有侵犯,请联系a@php.cn删除
    专题推荐:Angular Change Detection
    上一篇:nodejs学习之了解域名解析模块DNS 下一篇:详解nodejs中的queryString模块
    第15期线上培训班

    相关文章推荐

    • 浅谈angular9中拦截器的用法• angularjs数据绑定失效的解决方法• Angular入门学习之环境和项目的搭建• eclipse中如何配置angularjs插件的方法

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网