javascript - navigationend - Angular 2.x mirando por cambio de variable

router events subscribe angular 4

Question

Estoy migrando de angular 1.x a 2.x pero mis cerebros aún piensan en angular 1.x, lo siento por las preguntas tontas.

Lo que necesito es realizar alguna acción cuando cambie una de mis propiedades de componente de variables de alcance . Encontré una solución pero creo que debería haber una mejor solución

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

Mire la línea console.log(''isFixed changed'', value); Es lo que necesito y está funcionando. Pero lo logré declarando getter y setter , pero ¿no hay una mejor solución para observar las variables? Como en angular 1.x era $scope.$watch ?

Creo que mi código de componente debería verse como

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

Answer 1

Es posible que desee implementar la interfaz de OnChanges e implementar el método ngOnChanges() . Este método se llama siempre que uno de los componentes de entrada o salida cambie el valor de enlace. Consulte también https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

Ejemplo de código de dart

  @Input() bool fixed;

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

Answer 2

Es posible que esta respuesta a Delegación: EventEmitter u Observable en Angular2 sea útil (funcionó para mí).

Esencialmente, podría usar un BehaviorSubject , que le permite establecer un valor inicial para la propiedad en la que está interesado, y luego suscribirse a los cambios en esa propiedad donde sea que se inyecte el servicio.

Por ejemplo, si te estoy entendiendo correctamente, algo como esto:

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

Luego, en una clase (por ejemplo, un componente) que esté interesado en el valor 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();
  }
}

Valor de actualización:

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

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

Answer 3

Ver Angular2 Component Interaction (tiene ejemplos de código).

La respuesta corta a tu pregunta es que realmente solo depende de lo que estás tratando de hacer. Incluso entonces, hay varias formas de hacer lo que quieres hacer, incluso si no está realmente destinado a ello. Entonces, creo que es mejor si te tomas unos minutos para revisar su documentación sobre la interacción y los formularios de los componentes.

Mi preferencia personal es usar eventos cuando una propiedad ha cambiado. El evento ngOnChanges se puede usar para esto, pero prefiero trabajar con @Input y @Output , y eventos de cambio de valor de forma ( Angular2 Forms ).

Espero que esto te ayude y te dé una dirección que quieras tomar.