Question

在我的角度应用程序中，我使用相对路径在component.i之间导航，其父组件显示项目列表，子组件编辑该组件。问题是，当我编辑项目并导航回显示整个列表时，我必须刷新页面才能看到修改

const aoRoutes: Routes = [
  {
    path: "",
    redirectTo: "/ao/list",
    pathMatch: "full"
  },
  {
    path: "ao",
    component: AppelOffreComponent,
    children: [

      {
        path: "list",
        component: ListAoComponent,
        children: [

          {
            path: "edit/:ao_id",
            component: EditAoComponent
          },
..
];

我的组件是：

this._aoService
          .updateAO(appelOffre)

          .subscribe(success => {
            this.statusCode = success;
            this.loading = false;
          }, error => (this.statusCode = error));

        this.router.navigate(["../../"], { relativeTo: this.route });

Answer 1

您需要一个更永久的流，以便当组件订阅status$ observable时，它们会在更新发生时获得更新的值（来自http调用）。 shareReplay确保即使是迟到的订阅者也会收到该事件的通知。

例如：

import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/switchMap';


export class AoService {
    status$: Observable<number>;
    _status: Subject<AppelOffre>;
    constructor(private http: HttpClient) {
         this._status = new Subject<AppelOffre>();
         this.status$ = this._status.switchMap(t=> {
              const headers = new Headers(); 
              const options = new RequestOptions({ headers: headers }); 
              return this.http.put(this.updateAoUrl, ao, options)
                .map(success => success.status).catch(this.handleError); 
         }).shareReplay(1);
    }
    update(ao: AppelOffre) {
        this._status.next(ao);
    }
}

使用此解决方案，您只需订阅状态事件并调用update：

status: number;
constructor(private aoService: AoService) {
    this.aoService.status$.subscribe(t=> {
       this.status = t;
    });
    this.aoService.update();
}

您只需在一个地方拨打update()即可。如果status$ observable返回的数据而不是状态代码会更有用。但它取决于你。

Angular 2路由刷新父级

1 个答案: