Question

我创建了一个订阅服务的组件，而这个服务本身也是由另一个组件填充的。

我的订阅正常，而且我的this.data_id根据其他组件是最新的，但现在我还有一点问题。如何检测我的data_id已更改并根据此新ID重新加载我的项目列表。

我的代码中有2个函数，从未调用过ngOnChanges，到目前为止我还没有任何日志。

getData（）由按钮触发并完美地工作。如何为订阅下的data_id而非正常输入字段的行为提供ngOnChanges等行为？

import { Component,Input, OnChanges, SimpleChanges } from '@angular/core';

import {Item,ItemListData,ItemData} from '../itemService';
import {selectedDataService} from '../../../components/data/dataService';
import {Subscription} from 'rxjs/Subscription';

@Component({
  selector: 'item-list',
  templateUrl: './itemList.html',
  styleUrls: ['./itemList.scss'],
  providers:[
    ItemListData,
    ItemData
  ]
})
export class ItemListComponent implements OnChanges{

  @Input() data_id : number = null;
  items: Item[];

  subscription : Subscription;



  constructor( private _selectedDataService:selectedDataService) {
    this.subscription = this._selectedDataService.selectedDataItem$.subscribe(data_id => this.data_id = data_id);

  }

  ngOnChanges(changes: SimpleChanges) {
    console.log('onchanges',changes )
    this.getItemList(changes.data_id.currentValue);
  }

  getData(){
    this.getItemList(this.data_id);
  }


  ngOnDestroy() {
    // prevent memory leak when component is destroyed
    this.subscription.unsubscribe();
  }

}

Answer 1

不确定我是否理解正确，但如果您希望每次getItemList通知时都要调用selectedDataItem$函数，为什么不简单地在该订阅中调用此函数，如下所示：

this.subscription =
    this._selectedDataService.selectedDataItem$
        .subscribe(data_id => this.getItemList(data_id));

Answer 2

您正在组件本身中设置data_id input-parameter的值。这是一种不好的做法，因为它违反了单向数据流原则。输入参数的值只能由父组件设置。

getItemList函数在哪里？它似乎不在你的组件上。无论如何，当运行更改检测周期时，它将检查父组件的值以获取输入参数。当您自己设置这些参数时，它的逻辑是您获得更改检测问题。

Answer 3

可观察和主题或行为主题是两回事。

您的服务返回一个observable，因此您需要一个主题类型变量来访问它，或者简单地订阅它们以便按时间间隔从中获取数据。

int third_digit = (int) lround(cos(number)*1000.0) % 10;
third_digit = abs(third_digit);

角度2订阅不会发生更改事件

3 个答案: