Angular2 +双向绑定导致兄弟在初始化时更新

Question

我有 3 个组件结构。父组件有 2 个数组，allItems 和 pagedItems。 Pager 组件具有 item 的输入值和 pagedItems 的双向绑定。表格组件具有分页项的输入值。

组件示例

export class Table {

    @Input()
    pagedItems: any[] = [];
    constructor() { }
}

export class Pager {
    items: any[];

    @Input()
    set items(value: any) {
        this._items = value;
        this.setPage(this.currentPage);
    }

    get items() {
        return this._items;
    }

    _pagedItems: any[];

    @Input()
    get pagedItems() {
        return this._pagedItems;
    }

    @Output() pagedItemsChange = new EventEmitter();

    set pagedItems(value) {
        this._pagedItems = value;
        this.pagedItemsChange.emit(this._pagedItems);
    }

    setPage(page: number) {

        this.pager = this.pagerService.getPager(this.items.length, page, parseInt(this._pageSize));
        this.pagedItems = this.items.slice(this.pager.startIndex, this.pager.endIndex + 1);

    }
}

export class Parent {

    allItems: any[] = [];
    pagedItems: any[] = [];

    ngOnInit() { this.getData(); }
    getData() {
        ajaxcall.then(data => {
            this.allItems = data;
        })
    }
}

下面是 HTML 结构的示例：

<table class="col-12 col-md-12 col-lg-12 main-tbl pl-0 pr-0"
                                 [pagedItems]="pagedItems"
                                ></tbl-img-procurer-browser>

        <pager class="col-12 col-md-12 col-lg-12 main-tbl pl-0 pr-0"
               [items]="allItems" [(pagedItems)]="pagedItems"
         ></pager>

当我打开父组件时，它会调用 getData() 方法。这从服务器获取数据并将其放入 allItems 数组。现在 pager 获取数组并对其进行分页。并填充 pagedItems 数组。现在应该发生的是表格组件获取分页项并呈现它们。但实际发生的是表永远不会获取数据。现在，如果我更改寻呼机上的页面，表格会突然获取数据并开始显示它。为什么初始化的时候取不到数据？

编辑：

起初我认为这是不必要的信息，但根据 Mickers 给出的答案，我认为这是必要的。

我有一个额外的组件来处理表格的搜索表单。这个组件 onInit 创建一个事件，父级侦听并使用来自该事件的数据来执行 getData() ajax 调用。我不知道我是否可以在这里使用 resolve Guard。

export class filter{

@Output("onSubmit") onSearch: EventEmitter<SearchInput> = new EventEmitter<SearchInput>();

ngOnInit(){
    this.onSubmit();
    this.onSubmit();
  }

getSearchInput(){
    let searchInput: SearchInput = new SearchInput(
      //collects data from search form.
    );

    return searchInput;
  }

onSubmit() {
    this.onSearch.emit(this.getSearchInput());
  }

}

所以结构实际上是：

 <filter (onSubmit)="getData($event)"></filter>
 <table class="col-12 col-md-12 col-lg-12 main-tbl pl-0 pr-0"
                                     [pagedItems]="pagedItems"
                                    ></tbl-img-procurer-browser>

            <pager class="col-12 col-md-12 col-lg-12 main-tbl pl-0 pr-0"
                   [items]="allItems" [(pagedItems)]="pagedItems"
             ></pager>

Answer 1

我可以举例说明如何实现这一点。

首先您需要更新您的路由器（您必须使用路由器才能进行此修复）：

const HOME_ROUTE: Routes = [
  {
    path: 'home', // replace this with your route and component name
    component: HomeComponent,
    resolve: [HomeResolver] // this is where you implement the guard
  }
];

export default HOME_ROUTE;

这是守卫的外观示例：

@Injectable()
export class HomeResolver implements Resolve<string> {
  constructor(private router: Router) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<string> {
    console.log('home resolver fired');
    return of('true');
  }
}

更新您的组件以提取数据：

ngOnInit() {
    this.route.data.subscribe(({ str}) => {
        this.message= str;
    });
}

我希望这会为您指明正确的方向。