ChangeDetectionStrategy 后的问题
来源:6-1 高阶操作符

_Minos
2019-06-13
angular6+rxjs6
事情起因:
1、直接复制了老师的 date.json
2、按照老师的办法写了 project.server.ts 的 get 方法
3、组件ProjectListComponent 中调用
为题:
之后就没有之后了效果不像视频中的 直接就能显示出 project-list列表
解决办法:
看到ProjectListComponent, ProjectItemComponent 的装饰器内都有
changeDetection: ChangeDetectionStrategy.OnPush
自己试了试
a> ProjectListComponent 组件中的 OnPush策略删掉了------好用
b> 在订阅 的时候 调用了 ChangeDetectorRef 的 markForCheck 方法,手动激活自动更改检测----好用
疑惑
那么问题来了,我看老师的源码里 好像没有这个操作啊, angular官方API介绍ChangeDetectionStrategy 就是个枚举类型
changeDetectionRef 也就是 个对象。。。
也没有详细的说明(可能我自己没找到)
我好像是记得@Input @Output 这些操作不用 监测啊!
难道记错了?但是老师github上的代码中也没有啊!!!
求指教。
代码:
ProjectListComponent
@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 {
projects: Project[] = [];
constructor(
private dialog: MatDialog,
private cd: ChangeDetectorRef,
private service$: ProjectService
) {
this.service$.get('BkkDvwee-').subscribe(
project => {
this.projects = project;
console.log(this.projects);
// this.cd.markForCheck();
}
)
}
html
<div class="container" [@listAnim]='projects.length'>
<app-project-item (onDel)='launchConfirmDialog(project)' (onEdit)='launchUpdateDialog()' (onInvite)='launchInviteDialog(project)' class="card" *ngFor='let project of projects' [item]='projects'>
</app-project-item>
</div>
<button mat-fab class="fab-button" type="button" (click)='openNewProjectDialog()'>
<mat-icon>
add
</mat-icon>
</button>
server
// get 取得列表
get(userId: string):Observable<Project[]> {
const uri = `${this.config.uri}/${this.domain}`;
const params = new HttpParams().set('members_like', userId);
return this.http
.get<Project[]>(uri, {params: params});
}
2回答
-
这个是正常的,如果设置为 onpush 策略,那么只有当 @input 的值改变是才会触发脏值检测,所以需要 markForCheck,这个课程中应该也是这样的。
012019-06-13 -
_Minos
提问者
2019-06-13
我找了找 相关的问题,之前老师回答的。
OnPush 策略会在以下情况下失效
1、绑定的事件触发
2、@Input() 被更新
3、使用 async pipe
4、手动更新 this.cd.markForCheck()
@input更新的话为啥 Output不行啊 这块在 官方文档里有没有啊。。。
00
Angular打造企业级协作平台,让你在Angular领域中出类拔萃
998 学习 · 536 问题
相似问题