zoukankan      html  css  js  c++  java
  • [Angular] Inherit Parent Route Parameters by Default with ParamsInheritanceStrategy

    Right now, we're getting the ID route parameter off the of the parent route. This is because we want the info and items components to use the ID of the chosen camping system without having to pass it a second time. There's another way we can do this, though, and that's by defining a paramsInheritanceStrategy when we create our router module. The paramsInheritanceStrategy defines how the router merges parameters, data, and resolved data from parent to child routes.

    The default is "emptyOnly," which inherits those only for path-less or component-less routes.

    We're going to set it to "always" to enable unconditional inheritance of parent parameters, data, and resolved data in child routes.

      imports: [
        BrowserModule,
        RouterModule.forRoot(routes, { paramsInheritanceStrategy: "always" })
      ],

    So in Child component, previously we need to do:

      ngOnInit(): void {
        this.route.parent.paramMap
          .pipe(
            switchMap((params: ParamMap) => {
              this.id = +params.get("id");
              return this.systemService.getSystemItems(this.id);
            })
          )
          .subscribe(data => {
            this.items = data;
          });
      }

    But now, we just do:

      ngOnInit(): void {
        this.route.paramMap
          .pipe(
            ...
          )
          .subscribe(data => {
            this.items = data;
          });
      }

    There's one thing you need to be aware of. If there's any sort of overlap between data for example, that you're passing between parent and child routes, the activated route will be the one that wins out. 

  • 相关阅读:
    用上帝视角来看待组件的设计模式
    npm和package.json那些不为常人所知的小秘密
    四步走查智能硬件异常Case
    PorterDuffXfermode 图像混合技术在漫画APP中的应用
    发布流程进化史
    二叉搜索树的操作集
    02-线性结构1 两个有序链表序列的合并
    07-图6 旅游规划
    树的同构
    线性结构4 Pop Sequence
  • 原文地址:https://www.cnblogs.com/Answer1215/p/13355456.html
Copyright © 2011-2022 走看看