Угловой 2.x наблюдение за переменными изменениями

Я мигрирую из углового 1.x - 2.но мои мозги все еще думают в угловой 1.Икс так извиняется за глупые вопросы.

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

export class MyApp {
    router: Router;
    location: Location;
    fixed: boolean = true;

    private set isFixed(value:boolean) {
        this.fixed = value;

        //TODO: look here
        console.log('isFixed changed', value);
    }

    private get isFixed():boolean {
        return this.fixed;
    }

    constructor(router: Router, location: Location) {
        this.router = router;
        this.location = location;
    }
}

Посмотрите на строку console.log('isFixed changed', value); это то, что мне нужно, и это работает. Но я сделал это, объявив getter и setter, но разве нет лучшего решения для наблюдения переменных? Как в angular 1.x был $scope.$watch?

Я думаю, что мой код компонента должен выглядеть как 

export class MyApp {
    router: Router;
    location: Location;
    isFixed: boolean = true;

    //TODO: $watch for isFixed change {
        console.log('isFixed changed', value);
    // }

    constructor(router: Router, location: Location) {
        this.router = router;
        this.location = location;
    }
}
3 22
javascript

3 ответа:

Вы можете реализовать интерфейс OnChanges и реализовать метод ngOnChanges(). Этот метод вызывается всякий раз, когда изменяется значение привязки ввода или вывода одного из компонентов. См. также https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

Пример кода дротика 

  @Input() bool fixed;

  @override
  void ngOnChanges(Map<String, SimpleChange> changes) {
    print(changes);
  }
17

Вы можете найти Этот ответ на делегирование: EventEmitter или Observable в Angular2 полезным (работал для меня).

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

Например, если я правильно вас понял, что-то вроде этого: 
export class SomeService {
  private fixed = new BehaviorSubject<boolean>(true); // true is your initial value
  fixed$ = this.fixed.asObservable();

  private set isFixed(value: boolean) {
    this.fixed.next(value);
    console.log('isFixed changed', value);
  }

  private get isFixed():boolean {
    return this.fixed.getValue()
  }

  constructor(router: Router, location: Location) {
    this.router = router;
    this.location = location;
  }
}

Затем в классе (например, компоненте), который заинтересован в fixed значение: 

export class ObservingComponent {
  isFixed: boolean;
  subscription: Subscription;

  constructor(private someService: SomeService) {}

  ngOnInit() {
    this.subscription = this.someService.fixed$
      .subscribe(fixed => this.isFixed = fixed)
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

Значение обновления: 

export class Navigation {
  constructor(private someService: SomeService) {}

  selectedNavItem(item: number) {
    this.someService.isFixed(true);
  }
}
10

См. Взаимодействие компонентов Angular2 (имеет примеры кода).

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

Мое личное предпочтение-использовать события, когда свойство изменилось. The ngOnChanges для этого можно использовать event, но я предпочитаю работать с @Input и @Output, а также формировать измененные значения событий (Angular2 формы ).

Надеюсь, что это поможет и даст вам направление, которое вы хотите принять.

1