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回答

接灰的电子产品

2019-06-13

这个是正常的,如果设置为 onpush 策略,那么只有当 @input 的值改变是才会触发脏值检测,所以需要 markForCheck,这个课程中应该也是这样的。

0
1
_Minos
非常感谢!
2019-06-13
共1条回复

_Minos

提问者

2019-06-13

我找了找 相关的问题,之前老师回答的。

OnPush 策略会在以下情况下失效

1、绑定的事件触发

2、@Input() 被更新

3、使用 async pipe

4、手动更新 this.cd.markForCheck()

@input更新的话为啥 Output不行啊 这块在 官方文档里有没有啊。。。


0
0

Angular打造企业级协作平台,让你在Angular领域中出类拔萃

全网首个介绍官方 Material 组件库用法与 Redux 在 Angular 中的应用

998 学习 · 536 问题

查看课程