Question

Angular 2应用程序，其中应用程序的大部分状态都存在于通过Observable公开状态的@Injectable服务中。在某些时候，应用程序正在退出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区域，即使它们传播到父级＆gt; service-＆gt;订阅者。

这是一个在角度区域中工作和运行的组件模板，但它的子节点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>

角度2可观察到掉角区域

0 个答案: