使用路由，讓路由/組件在路由更改時執行ajax調用？

我想對每個路由更改都做一次ajax調用，將數據加載到當前路由的組件範圍中。使用路由，讓路由/組件在路由更改時執行ajax調用？

我已經使用控制器和事件在Angular 1中完成了這項工作。當控制器加載時，請執行ajax請求，等待響應，然後繼續。

任何人都可以指出我在正確的方向上開始Angular 2這樣的事情嗎？

2017-01-06 Charlie

哦..有合法組件繼承現在...讓我看到，導致...... – Charlie

你的意思你想做一個異步調用，然後等待它在更改路由之前解決？有一個解析器：https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html。看看這是否有幫助。基本上它可以讓你在路由改變之前預加載一些東西，並將它存儲在路由快照中，以便後續組件可以訪問它。 – Yodacheese

是的。我基本上想要在每個「頁面」組件中注入一項服務。這看起來很有前途...... – Charlie

我創建了一個所有頁面擴展的基本組件。創建組件時，在構造函數中，我將該服務分配給一個私有變量，並在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); 
    } 
}

這似乎運作良好。

現在我只需要弄清楚如何讓暴露到模板中的數據...

來源

2017-01-06 19:18:41 Charlie

使用路由，讓路由/組件在路由更改時執行ajax調用？

回答

相關問題