方案：

Question

方案：

我有以下路线：

/feature/1/page1
/feature/1/page2
/feature/2/page1

/feature路由由AppRoutingModule处理，其余由FeaureRoutingModule处理：

const routes: Routes = [
  {
    path: ':id',
    component: LayoutComponent,
    children: [
      {
        path: 'page1',
        component: Page1Component,
      },
      {
        path: 'page2',
        component: Page2Component,
      }
    ],
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class FeatureRoutingModule { }

问题：

目前我只能使用LayoutComponent在ActivatedRoute中捕获ID参数。如何将其传递给子组件（页面）？如何处理加载要求（加载一次然后保留在内存中）？

我正在考虑创建布局组件和页面之间共享的状态服务。理想情况下，我想将基于：id参数加载的资源注入页面组件。

我现在拥有的：

所以我创建了在LayoutComponent和子页面之间共享的ModelProviderService。

@Injectable()
export class ModelProviderService {
  currentModel: Model;
  loadFrom(id: string): Observable<Model>{
     this.httpClient.get<Model>(....).do(model => this.currentModel = model);
  }
}

我从LayoutComponent调用它：

export class LayoutComponent implements OnInit, OnDestroy {
  constructor(
    private route: ActivatedRoute, 
    private modelProvider: ModelProviderService) {     
  }

  private rouerSubscription: Subscription;
  initialized = false;

  ngOnInit() {
    this.rouerSubscription = this.route.paramMap
      .do(params => this.initialized = false)
      .switchMap(params => this.modelProvider.loadFrom(params.get('id;)))
      .do(() => this.initialized = true, error => { this.initialized = false; alert(error); })
      .subscribe();   
  }

  ngOnDestroy() {
    if (this.rouerSubscription) this.rouerSubscription.unsubscribe();
  }
}

但是，以下代码不反映路线的变化。

export class Page1Component implements OnInit {
  constructor(private modelProvider: ModelProviderService) { }

  model: Model;

  ngOnInit() {
      this.model = this.modelProvider.currentModel;     
  } 
}

如何在需要时刷新模型？是否可以从LayoutComponent设置Page1Component.model而不是订阅每个Page组件中的某些事件？

Answer 1

ActivatedRoute具有parent属性，可用于访问父ActivatedRoute。

对于加载缓存，它由Angular自动处理。一旦模块通过路由请求加载到Angular中，Angular就会将JIT编译模块保存在内存中，从而使后续请求更快。

编辑：Angular不会处理缓存AJAX请求。建议为此制作缓存服务。

基于子路由组件中的ID加载

方案：

问题：

我现在拥有的：

1 个答案: