Angular 2.x просмотр изменения переменной

Я перехожу из angular 1.x в 2.x, но мои мозги все еще думают в angular 1.x, так жаль глупых вопросов.

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

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;
    }
}

Ответ 1

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

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

  @Input() bool fixed;

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

Ответ 2

Вы можете найти этот ответ для делегирования: 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;
  }
}

Затем в классе (например, Component), который интересуется значением 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);
  }
}

Ответ 3

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

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

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

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