Question

我希望在每次路由更改时都进行ajax调用，将数据加载到当前路由的组件范围内。

我在Angular 1中使用控制器和事件完成了这项工作。当控制器加载时，执行ajax请求，等待响应，然后继续。

任何人都可以为Angular 2开始使用类似的东西指向正确的方向吗？

Answer 1

我创建了一个所有页面都扩展的基本组件。创建组件时，在构造函数中我将服务分配给私有变量，并在ngOnInit上运行服务以获取其数据。

export class BasicPageComponent implements OnInit {

  protected pageService: PageDataService;
  protected data;
  protected options;

  constructor(public key:string) {
    this.pageService = ServiceLoader.injector.get(PageDataService);
  }

  getData(): void {
    if(!this.key) { return; }
    this.pageService.get(this.key).then(data => {
      this.data = data.data; 
      this.options = data.options;
    });
  }
  ngOnInit(): void {
    this.getData();
  }

}

然后是一个子组件：

export class GeneralComponent extends BasicPageComponent {
    constructor() {
        super("general");
    };
}

然后我的服务：

@Injectable()
export class PageDataService {
  private pageUrl: string;
  private currentPage: PageData;

  constructor(private http: Http) {
    this.pageUrl = environment.url;
  }

  get(query: string) {
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    let params: URLSearchParams = new URLSearchParams();
    params.set("q", query);
    options.search = params;

    return this.http.get(this.pageUrl, options).toPromise().then(this.extractData).catch(this.handleError);
  }

  private extractData(res: Response) {
    let body = res.json();
    return body || {};
  }

  private handleError(error: Response | any) {
    let errMsg: string;
    if(error instanceof Response) {
      const body = error.json() || '';
      const err = body.error || JSON.stringify(body);
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
      errMsg = error.message ? error.message : error.toString();
    }
    console.log(errMsg);
    return Promise.reject(errMsg);
  }
}

这似乎运作良好。

现在我只需要弄清楚如何将数据暴露在模板中......

使用路由，让路由/组件在路由更改时执行ajax调用？

1 个答案: