Угловое 2 вручную запуска ngIf

Question

В настоящее время, мой объект DOM выглядит следующим образом:

<div *ngIf="checkCam1Exists()"> 
    <app-counter [index]="1"></app-counter> 
</div> 

В рамках компонента, функция 'checkCam1Exists() выглядит следующим образом:

checkCam1Exists(){ 
    console.log("checkCam1ran"); 
    if(this.cameraService.camera1 == null){ 
    return false; 
    } 
    else{ 
    return true; 
    } 
} 

Где cameraService является сервис, который вводится в конструктор компонентов, а camera1 - объект в CameraService.

Моя проблема заключается в том, чтобы запустить ngIf снова. Объект camera1 обновляется из другой службы (dataService, которая делает HTTP-запрос). Как запустить ngIf для запуска снова?

Я прочитал сообщение ниже: Triggering Angular2 change detection manually - но примеры, представленные в Угловых документах, как представляется, не охватывают, как проверять переменные за пределами класса компонента (и мне нужно проверить служебные переменные).

EDIT

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

constructor(private ref: ChangeDetectorRef, private cameraService: CameraService, private toolbarService: ToolbarService) { 
    ref.detach(); 
    setInterval(() => { 
     this.ref.detectChanges(); 
    }, 5000); 
    } 

Хотя это чувствует себя невероятно неэффективным способом, чтобы сделать это. Как я могу вручную запустить обнаружение изменений?

EDIT 2

С помощью Лукаса Tetreault, я думаю, что я мог бы идти за пределами углового 2 зоны для исходного события щелчка, любое взаимодействие с приложением (после того, как исходное событие Click) причины ngIf обнаружить это изменение и снова начать работать. Мой вопрос должен лежать здесь:

map.data.addListener('click', (event) => { 
     var mapElement = event.feature.getProperty('type'); 
     switch(mapElement){ 
     case 'classifiedroads': 
      var roadnumber = event.feature.getProperty('roadID'); 
      map.data.revertStyle(); 
      map.data.overrideStyle(event.feature, { 
      strokeWeight: 8 
      }); 
      this.roadService.roadClicked(roadID); 
      break; 
     case 'cameras': 
      var cameraID = event.feature.getProperty('trafficID'); 
      this.cameraService.cameraClicked(cameraID); //camera is initialised at this stage. 
      break; 
     default: 
      break; 
     } 
    }); 

У меня есть объект Google Map импортированные с помощью JavaScript (существуют ограничения с проектом Angular2 Google Map, что я был предупрежден, против которого почему я не использую это). Это событие click должно выходить за пределы зоны Angular 2, и когда я нажимаю в другом месте приложения, я снова вхожу в зону Angular 2, и обнаружение изменения ngIf снова запускается.

Есть ли способ, которым я могу вручную принудительно изменить обнаружение изменения ngIf?

Answer 1

Вместо trigerring вручную, вы можете сделать это прямо в HTML

нг-если = "cameraService.camera1! = NULL"

Answer 2

Это то, что работает для меня в конце концов.

Я предполагаю, что это правильно из проведенных мной исследований: Использование Google Maps с AddListener означало создание слушателей JavaScript за пределами зоны Angular 2. Это означает, что если переменные или что-то изменится, обнаружение изменений углового 2 не будет запущено. Для борьбы с этим, вводят NgZone в конструктор класса:

constructor(private cameraService: CameraService, private ngZone: NgZone)... 

Использование NgZone на».запустить()», чтобы вновь войти в Угловое 2 зоны:

map.data.addListener('click', (event) => { 
     var mapElement = event.feature.getProperty('type'); 
     switch(mapElement){ 
     case 'cameras': 
      var cameraID = event.feature.getProperty('traffic_asset_bk'); 
      this.ngZone.run(
      () => this.cameraService.cameraClicked(station_key) 
     ); 
      break; 
     default: 
      break; 
     } 
    }); 

Answer 3

Я знаю, что я опоздал на вечеринку, но есть несколько способов, в угловом мире реализовать что-то подобное. Лично для этого случая я предпочел бы использовать наблюдаемый BehaviorSubject. По существу в вашей службе камеры вы должны создать экземпляр BehaviorSubject, наблюдаемый, а затем в своем компоненте, который вы подписали бы на него, и сохраните результат при каждом обновлении до свойства в своем компоненте, который будет выполняться с помощью * ngIf. Я сделал это в нескольких проектах, и он работает очень хорошо.

camera.service.ts

private cameraStatus: BehaviorSubject<ModalProperties> = new BehaviorSubject<boolean>(false); 
    cameraStatus$ = this.cameraStatus.asObservable(); 

updateCameraStatus(status: boolean) { 
    this.cameraStatus.next(status); 
} 

компонент-где-вы-обновление-камера-status.ts

turnCameraOn() { 
    this._CameraService.updateCameraStatus(true); 
} 

ваши-component.component.ts

componentVisibile: boolean 

this_CameraService.cameraStatus$.subscribe(
    _CameraStatus => { 
     this.componentVisible = _CameraStatus; 
    } 
)