angular2，将值分配给router.events中的组件不会触发视图更新吗？

Question

1. When navigating to other routes, I will save some values in service.

2. Navigate back, I grab the values from the service and assign to component variable again.

3. the component variable is bind to input [(ngModel)] .

ngOnInit() {
    this.dataSource = new PropertyDataSource(this.paginator, this.propertyService);
    this.displayedColumns = this.tableHeaders.map((header) => header.key);
    this.selectedOption = this.propertyOptions[0];

    this.paginatorService.i18n(this.paginator, 'cn');

    this.router.events.filter((event) => event instanceof NavigationEnd).pairwise()
      .subscribe((events: any) => {
        const prevRouteUrl: string = events[0].url;
        const currentRouteUrl: string = events[1].url;

        if (prevRouteUrl.indexOf(`${currentRouteUrl}/edit`) !== -1) {
          const lastQueryCondition: IQueryCondition = this.propertyService.getQueryCondition();
          const { pageIndex, keyword } = lastQueryCondition;

          //TODO: why view not update???
          this.zone.run(() => {
            this.keyword = keyword;
            this.paginator.pageIndex = pageIndex;
          });

          this.getPropertiesByName(keyword, pageIndex + 1);

        }
      });
  }

HTML:

<input type="text" name="keyword" placeholder="keyword" [(ngModel)]='keyword' required />

The problem is when I assign the value to the component variable, eg this.keyword , the view does not update which means the input is empty.

Even I use NgZone and ChangeDetectorRef , the view still not update.

Answer 1

What if instead of subscribing to router events you added a getter to your component:

  get keyword(): string {
     return this.propertyService.getQueryCondition().pageIndex;
  }

I have a blog post illustrating this technique here: https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

And a plunker here: https://plnkr.co/edit/KT4JLmpcwGBM2xdZQeI9?p=preview

My service basically looks like this:

import { Injectable } from '@angular/core';

@Injectable() 
export class DataService {
  serviceData: string; 
}

and the component like this:

import {Component} from '@angular/core'

import { DataService } from './data.service';

@Component({ 
 template: ` 
  <div> 
    <h2>Data from A: {{ data }} </h2> 
    <input [(ngModel)] = data /> 
    <br><br> 
    <a [routerLink]="['/b']">Go to B</a> 
  </div> 
  `, 
}) 
export class A {

  get data():string { 
    return this.dataService.serviceData; 
  } 
  set data(value: string) { 
    this.dataService.serviceData = value; 
  } 

  constructor(public dataService: DataService) { } 
}