4

Angular 2 应用程序，其中应用程序的大部分状态都存在于 @Injectable 服务中，这些服务通过 Observable 公开状态。在某些时候，应用程序会退出 Angular Zone，这会导致更改检测不起作用。在我的订阅中，我需要ChangeDetectorRef.detectChanges()在发生这种情况时打电话。如何确保应用程序不会退出 Angular Zone？或者确定是什么原因造成的？

这是我的服务：

@Injectable()
export class CalendarFilterStore {
    private currentState: CalendarFilter;
    private state$ = new ReplaySubject<CalendarFilter>(1);

    constructor() {
        this.currentState = {
            startDate: new Date(2016, 10, 14, 2)
        };
        this.state$.next(this.currentState);
    }

    get state(): Observable<CalendarFilter> {
        console.log('calendar filter state, zone: ' + Zone.current.name);
        return this.state$.asObservable();
    }

这是使用此服务的组件的 ngOnInit 函数：

ngOnInit() {
    console.log('ng init zone: ' + Zone.current.name);
    this.calendarFilterStore.state
        .filter(state => {
            console.log('got filter state, zone: ' + Zone.current.name);
            return (state.areaIDs !== undefined && state.worksiteID !== undefined && state.startDate !== undefined && state.numberOfShifts !== undefined);
        })
        .switchMap(state => this.getCalendar(state))
        .subscribe(res => {
            console.log('got calendar, dashboard-table, zone: ' + Zone.current.name);
            this.loadCalendar(res);
        }, error => {
            console.log(error);
        });

这是我们退出 Angular Zone 时显示的控制台输出。它似乎发生在 Calendar 过滤器发出它的第二个值时。

calendar filter state, zone: angular
calendar-filter - store.ts:21 calendar filter state, zone: angular
calendar-store.ts:22 get calendar state, zone: angular
dashboard-table.component.ts:60 ng init zone: angular
calendar-filter - store.ts:21 calendar filter state, zone: angular
dashboard-table.component.ts:63 got filter state, zone: angular
dashboard-table.component.ts:63 got filter state, zone: <root>
dashboard-table.component.ts:63 got filter state, zone: <root>
calendar.service.ts:25 get calendar, zone: <root>
calendar.service.ts:31 got calendar, zone: <root>
dashboard-table.component.ts:68 got calendar, dashboard-table, zone: <root>
calendar-store.ts:27 segments returned, zone: <root>

我已将其缩小到在我的组件树中深入几个级别的组件。当我在其构造函数中检查 Zone.current.name 时，它​​们位于root区域中而不是angular区域中。它们发出的任何事件都保留在root区域中，即使它们传播到父->服务->订阅者也是如此。

这是一个在角度区域中工作和运行的组件模板，但其子模板 sb-worksite-selector 在根区域中运行，如输出所示。

<div class="dashboard-navigation" *ngIf="optionsLoaded">
  <button type="button" class="btn btn-secondary" (click)="previousDay()"><i class="fa fa-backward" aria-hidden="true"></i> Previous Day</button>
  <div class="inline-block">
      <sb-worksite-selector [worksiteOptions]="worksiteOptions"
                            (onWorksiteChanged)="worksiteChanged($event)">
      </sb-worksite-selector>
  </div>

sb-工地选择器

@Component({
    selector: 'sb-worksite-selector',
    templateUrl: 'worksite-selector.component.html',
    styleUrls: ['worksite-selector.component.scss']
})
export class WorksiteSelectorComponent implements OnInit {
    @Input() worksiteOptions: Array<any>;
    @Output() onWorksiteChanged = new EventEmitter<number>();

    constructor() {
        console.log('create worksite selector, zone: ' + Zone.current.name);
    }

    ngOnInit() {
        console.log('init worksite selector, zone: ' + Zone.current.name);
    }
}

工作地点选择器的日志记录：

calendar filter state, zone: angular
dashboard - table.component.ts:63 got filter state, zone: angular
calendar.service.ts:25 get calendar, zone: angular
dashboard - navigation.component.ts:63 dashboard navigation got areas and worksites, zone: angular
worksite - selector.component.ts:14 create worksite selector, zone: <root>
worksite - selector.component.ts:18 init worksite selector, zone: <root>
4

0 回答 0