0

Angular2 不会触发ChangeDetection单击事件后的事件。下面的代码片段用于将数据从一个组件获取到另一个组件。

点击事件

 (click)="$event.preventDefault(); setApartmentObject(FlatObject)";

ApartmentOverview组件

constructor(private _apart:ApartmentService) {}

setApartmentObject(flat:ApartmentObject) {
    this._apart.setApartmentDetails(flat);
}

公寓服务

Injectable()
export class ApartmentService {

  apartmentDetails:ApartmentObject

  getApartmentDetails():Observable<ApartmentObject> {
      return Observable.create((observer) => {
          observer.next(this.apartmentDetails);
          observer.complete();
      });
  }

  setApartmentDetails(value:ApartmentObject) {
      this.apartmentDetails = value;
  }
}

公寓细节组件

constructor(private _apart:ApartmentService)

get apartmentDetails() {
    this._apart.getApartmentDetails().subscribe(data => {
        this._apartmentDetails = data;
    });
    return this._apartmentDetails;
}

在 HTML 文件中

 <p><strong>{{apartmentDetails.name || 'Musterwohnung'}}</strong></p>

我也尝试用事件发射器解决这个问题，但没有成功。只有以下脏修复有效：

constructor(private _ref:ChangeDetectorRef) {
  this._ref.detach();
  setInterval(() => {
     this._ref.detectChanges();
  }, 300);
}
4

1 回答 1

2

您的代码存在一些问题，实际上阻止了该值被读取。

首先——在你的服务中——当你设置值时，你只是在服务的实例上做，而不是把它提供给可观察的对象。observable 只是无法知道该值已更改，因此它不会发出更改（下一个）事件。这就是为什么ApartmentOverviewComponent. setApartmentObject()什么都不做的原因。要真正为 observable 提供数据，您需要使用 Subject。

在 ApartmentDetailComponent 中，在这个简单的场景中（始终同步提供数据），您可以通过尝试的方式获得价值。但是，如前所述，数据永远不会改变。将数据存储在组件实例的_apartmentDetails字段中也是需要的。您可以在模板中使用 observable。

工作实现是这样的：

@Injectable()
class ApartmentService {
  // BehaviorSubject is a type of an Observable that can be manually fed with data
  // and returns it's last value to any subscriber.
  apartmentDetails = new BehaviorSubject<ApartmentObject>({name: 'Musterwohnung'});

  // Instead of using a property of the service, just inform the
  // subject about knew data and let it spread the change for you.
  setApartmentDetails(value: ApartmentObject) {
    this.apartmentDetails.next(value);
  }
}

@Component({
  selector: 'overview-cmp',
  // Side note: you don't need to .preventDefault() here.
  template: `<a (click)="setApartmentObject({name: 'Shiny Aparament'})">click</a>`
})
class ApartmentOverviewComponent {
  constructor(private apartService: ApartmentService) {}

  // Works same as before.
  setApartmentObject(flat: ApartmentObject) {
    this.apartService.setApartmentDetails(flat);
  }
}

@Component({
  selector: 'details-cmp',
  // Use the 'async' pipe to access the data stored in an Observable
  // object. Also, to secure the code, use '?' to safely access the property.
  template: `<p><strong>{{(details | async)?.name}}</strong></p>`
})
class Apartament {
  // This is the observable with data.
  details: Observable<ApartmentObject>;

  constructor(private apartService: ApartmentService) {}

  // When component initialises, assign the observable data from the service
  ngOnInit() {
    this.details = this.apartService.apartmentDetails;
  }
}
于 2016-07-22T20:28:57.557 回答