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
})

Angular changeDetction的更多相关文章

  1. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  2. Angular企业级开发(5)-项目框架搭建

    1.AngularJS Seed项目目录结构 AngularJS官方网站提供了一个angular-phonecat项目,另外一个就是Angular-Seed项目.所以大多数团队会基于Angular-S ...

  3. TypeScript: Angular 2 的秘密武器(译)

    本文整理自Dan Wahlin在ng-conf上的talk.原视频地址: https://www.youtube.com/watch?v=e3djIqAGqZo 开场白 开场白主要分为三部分: 感谢了 ...

  4. angular实现统一的消息服务

    后台API返回的消息怎么显示更优雅,怎么处理才更简洁?看看这个效果怎么样? 自定义指令和服务实现 自定义指令和服务实现消息自动显示在页面的顶部,3秒之后消失 1. 显示消息 这种显示消息的方式是不是有 ...

  5. div实现自适应高度的textarea,实现angular双向绑定

    相信不少同学模拟过腾讯的QQ做一个聊天应用,至少我是其中一个. 过程中我遇到的一个问题就是QQ输入框,自适应高度,最高高度为3row. 如果你也像我一样打算使用textarea,那么很抱歉,你一开始就 ...

  6. Angular企业级开发-AngularJS1.x学习路径

    博客目录 有链接的表明已经完成了,其他的正在建设中. 1.AngularJS简介 2.搭建Angular开发环境 3.Angular MVC实现 4.[Angular项目目录结构] 5.[SPA介绍] ...

  7. Angular企业级开发(4)-ngResource和REST介绍

    一.RESTful介绍 RESTful维基百科 REST(表征性状态传输,Representational State Transfer)是Roy Fielding博士在2000年他的博士论文中提出来 ...

  8. Angular企业级开发(3)-Angular MVC实现

    1.MVC介绍 Model-View-Controller 在20世纪80年代为程序语言Smalltalk发明的一种软件架构.MVC模式的目的是实现一种动态的程序设计,使后续对程序的修改和扩展简化,并 ...

  9. Angular企业级开发(2)-搭建Angular开发环境

    1.集成开发环境 个人或团队开发AngularJS项目时,有很多JavaScript编辑器可以选择.使用优秀的集成开发环境(Integrated Development Environment)能节省 ...

随机推荐

  1. LeetCode--11_Container_With_Most_Water

    题目链接:点击这里 首先我们不考虑高度的话 最大的面积应该是l r 应该是最边上的值 ,我们要取最大 所以 要维护从左到右单调增,从右到左 单调增 这样我们才能保证 面积增加 public stati ...

  2. 洛谷P2179 骑行川藏

    什么毒瘤... 解:n = 1的,发现就是一个二次函数,解出来一个v的取值范围,选最大的即可. n = 2的,猜测可以三分.于是先二分给第一段路多少能量,然后用上面的方法求第二段路的最短时间.注意剩余 ...

  3. Django web编程2 -- 编辑页面内容

    你将创建一些表单,让用户能够添加主题和条目,以及编辑既有的条目.你还将学习Django如何防范对基于表单的网页发起的常见攻击,这让你无需花太多时间考虑确保应用程序安全的问题. 然后,我们将实现一个用户 ...

  4. Java基础--面向对象编程4(多态)

    1.多态的概念 多态是指程序中的同一引用类型,使用不同的实例而执行结果不同的. 同一个类型:一般指父类 不同的实例:不同的子类实例 执行结果不同:针对同一方法执行的结果不同 package cn.sx ...

  5. 试用VS2019正式版

    1.下载地址https://visualstudio.microsoft.com/zh-hans/downloads/2.安装,安装过程比较简单,直接下一步,下一步即可,现在的网速一般下载+安装要2个 ...

  6. 《11招玩转网络安全》之第五招:DVWA命令注入

    首先还是将DVWA的安全级别设置为Low,然后单击DVWA页面左侧的Command Injection按钮. ​ 图5-1  Low级别的命令注入 这个就是最典型的命令注入接口.在文本框中输入一个IP ...

  7. 【Unity】透明度渐变

    写给美术大佬的脚本,还要继续改,github地址:TransEffect[github] 效果图如下: Ver.1源码,针对3d Object: using System.Collections; u ...

  8. 20155324王鸣宇 《网络对抗技术》Web基础

    20155324王鸣宇 <网络对抗技术>Web基础 实践要求 ①Web前端HTML: 能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HT ...

  9. Contest2195 - 2019-4-25 高一noip基础知识点 测试8 题解版

    (因为david_alwal太懒了,所以本期题解作者为Th Au K,码风不同请自行适应) 传送门 T1 BFS?贪心?我也说不清 反正就是对每一个“#”搜一下他的旁边有没有“#”就行了 代码 T2 ...

  10. css实现背景模糊,但不影响背景上的内容

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...