Question

我正从角度1.x迁移到2.x但是我的大脑仍然在角度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来实现它，但是没有更好的解决方案来观察变量吗？像角度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;
    }
}

Answer 1

您可能希望实现OnChanges接口并实现ngOnChanges()方法。只要其中一个组件输入或输出绑定值发生更改，就会调用此方法。另请参阅https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

Dart代码示例

  @Input() bool fixed;

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

Answer 2

您可能会发现this answer to Delegation: EventEmitter or Observable in Angular2有帮助（为我工作）。

基本上你可以使用BehaviorSubject，它允许你为你感兴趣的属性设置一个初始值，然后在注册服务的任何地方订阅对该属性的更改。

e.g。所以，如果我正确理解你，就像这样：

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值感兴趣的类（例如Component）中：

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

Answer 3

请参阅Angular2 Component Interaction（有代码示例）。

对你的问题的简短回答是，这实际上取决于你想要做什么。即使这样，即使它并非真正意图，也有多种方法可以做你想做的事情。所以，我认为最好只花几分钟时间查看他们关于组件交互和表单的文档。

我个人的偏好是在物业发生变化时使用事件。 ngOnChanges事件可以用于此，但我更喜欢使用@Input和@Output以及form value changed events（Angular2 Forms）。

希望这会有所帮助并为您提供一个您想要的方向。

Answer 4

要通过此服务自动获取更新的值

注意：我在Angular 9中进行了测试我的服务档案

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
    providedIn: 'root'
})
export class SharedService {
    private fixed= new BehaviorSubject<boolean>(false);
    fixed$ = this.fixed.asObservable();

    constructor() {}

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

现在您可以在任何组件（在ngOnInit或所需的任何位置）中获取价值，如下所示注意：此值将在更新后自动更改

this.sharedService.fixed$.subscribe(val=>{ this.isFixed = val; });

，您可以从以下任何组件中更新或设置新值

this.sharedService.updateFixedValue(your_boolean_value);

谢谢，我希望它对您有用。

Angular 2.x观察变量变化

4 个答案: