Question

我有3个组件结构。父组件具有2个数组，即allItems和pagedItems。分页器组件具有项的输入值和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数组。现在，分页器获取数组并将其分页。并填充pagedItems数组。现在应该发生的是，表组件获取了分页的项目并进行渲染。但是实际上发生的是该表从不获取数据。现在，如果我更改了寻呼机上的页面，该表会突然获取数据并开始显示它。为什么在初始化过程中无法获取数据？

编辑：

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

我还有一个其他组件来处理表格的搜索表单。此组件onInit创建一个事件，父级监听该事件并使用事件中的数据进行getData（）ajax调用。我不知道我是否可以在这里使用解决防护。

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

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

Angular2 +双向绑定可导致同级对象在初始化时更新

1 个答案: