web-dev-qa-db-fra.com

Angular 2.x surveillant le changement de variable

Je migre de angular 1.x à 2.x mais mon cerveau pense encore dans angular 1.x, désolé pour les questions idiotes.

Ce dont j'ai besoin, c’est d’agir lorsque l’un de mes variables de portée les propriétés des composants changent. J'ai trouvé une solution mais je pense qu'il devrait y avoir une meilleure solution

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

Regardez la ligne console.log('isFixed changed', value); C'est ce dont j'ai besoin et ça marche. Mais je l'ai fait en déclarant getter et setter, mais n'y a-t-il pas une meilleure solution pour surveiller les variables? Comme dans angular 1.x était $scope.$watch?

Je pense que mon code composant devrait ressembler à

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;
    }
}
javascriptangular
25
Arūnas Smaliukas

Vous voudrez peut-être implémenter l'interface OnChanges et la méthode ngOnChanges(). Cette méthode est appelée chaque fois qu'une des valeurs d'entrée de composant ou de liaison de sortie change. Voir aussi https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

Exemple de code de fléchette

  @Input() bool fixed;

  @override
  void ngOnChanges(Map<String, SimpleChange> changes) {
    print(changes);
  }
19
Günter Zöchbauer

Vous pourriez trouver cette réponse à Délégation: EventEmitter ou Observable in Angular2 utile (a fonctionné pour moi).

Vous pouvez utiliser essentiellement un BehaviorSubject, qui vous permet de définir une valeur initiale pour la propriété qui vous intéresse, puis de vous abonner aux modifications apportées à cette propriété chaque fois que le service est injecté.

par exemple. Donc, si je vous comprends bien, quelque chose comme ceci:

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

Ensuite, dans une classe (par exemple, Component) qui s'intéresse à la valeur 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();
  }
}

Valeur de mise à jour:

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

  selectedNavItem(item: number) {
    this.someService.isFixed(true);
  }
}
16
a darren

Voir Interaction composante angulaire2 (exemples de code).

La réponse courte à votre question est que cela dépend vraiment de ce que vous essayez de faire. Même dans ce cas, il y a plusieurs façons de faire ce que vous voulez, même si ce n'est pas vraiment prévu. Je pense donc que le mieux est que vous preniez quelques minutes pour regarder leur documentation sur l'interaction entre composants et les formulaires.

Ma préférence personnelle est d'utiliser des événements lorsqu'une propriété a été modifiée. L'événement ngOnChanges peut être utilisé pour cela, mais je préfère travailler avec @Input et @Output et événements liés à la valeur de la forme ( Angular2 Forms ).

J'espère que cela vous aide et vous donne la direction que vous souhaitez prendre.

1
Kody