Как перерисовать компонент вручную?

Я новичок в Angular2, я привык к циклу цикла Angular 1, то есть, если я обновляю область видимости, я могу вручную вызвать дайджест, вызвав $scope.$digest(). Тем не менее, я не уверен, как это сделать в Angular2, esp, учитывая, что новая структура не имеет неявных привязок данных, которые использовалась в старой версии.

Вот моя проблема. У меня есть маршрут, который загружает компонент при попадании URL-адреса с параметром:

// Router
export const AppRoutes : RouterConfig = [
    {
    path: 'my/:arg/view',
    component: MyComponent  
    }
]

Тогда у меня есть этот компонент:

// Component
export class MyComponent {
    constructor(private route : ActivatedRoute,
      private r : Router) {
    let id = parseInt(this.route.params['value'].id);
    console.log(id);
    // do stuff with id
    }

    reloadWithNewId(id:number) {
        this.r.navigateByUrl('my/' + id + '/view');
    }
}

Предположим, что я перехожу к url /my/1/view. Он вызывается конструктором и записывается номер 1. Однако, если я вызываю reloadWithNewId с новым id, reloadWithNewIf(2), конструктор не вызывается снова. Как вручную перезагрузить компонент?

Ответ 1

Не нужно перезагружать компонент. Просто обновите модель и сами обновления:

export class MyComponent {
    constructor(private route : ActivatedRoute,
      private r : Router) {}

    reloadWithNewId(id:number) {
        this.r.navigateByUrl('my/' + id + '/view');
    }

    ngOnInit() {
      this.sub = this.route.params.subscribe(params => {
         this.paramsChanged(params['id']);
       });
    }

    paramsChanged(id) {
      console.log(id);
      // do stuff with id

    }
}

Ответ 2

Вы можете заставить angular2 повторно инициализировать компонент, перейдя по другому URL-адресу, а затем обратно к тому, который вы хотите.

Вот мое проворное обходное решение с использованием методов класса Router (ссылка: https://angular.io/docs/ts/latest/api/router/index/Router-class.html)

Конструктор компонентов:

constructor(private router: Router) {}

В шаблоне (пример):

(click)="onTabChange(id)"

Затем внутри класса компонента:

onTabChange() {
  if (this.router.navigated === false) {
    // Case when route was not used yet
    this.router.navigateByUrl(`/module/${id}`);
  } else {
    // Case when route was used once or more
    this.router.navigateByUrl(`/index`).then(
      () => {
        this.router.navigateByUrl(`/module/${id}`);
      });
  }
}

Ответ 3

Конструктор не будет вызываться снова, когда вы просто обновляете параметры. Поскольку класс Component уже создан,

вы можете подписаться на изменения параметров, как показано ниже, если вы хотите обнаружить изменение,

  constructor(route: ActivatedRoute) {
    route.params.subscribe(param => {
        let id = param['id '];
        // Do your stuff with id change.
    });
  }

Надеюсь, это поможет!