主页 / coding / 问题 / 77740531
Accepted
D052057
Asked: 2024-01-01 06:39:28 +0800 CST

Angular 17：带有参数的延迟加载独立组件？

  • 772

这是我的html：

<a class="dropdown-item" [routerLink]="['/videos', p.param]">{{ p.title }}</a>

这是app.route.ts中的代码：

{
    path: 'videos/:folder',
    loadComponent: () => import('./pages/application/video/video.component')
      .then(mod => mod.VideoComponent)
  },

这是 VideoComponent 中的代码（是一个独立的组件，我尝试获取值文件夹：

ngOnInit(): void {
    this.route.paramMap
      .subscribe(
        (params: any) => {
          console.log("value params folder:" + params);
          this.folder = params.folder; <--- no value.
        }
      )
  
  }

并且 params.folder 没有值。我用谷歌搜索但没有看到任何东西。
独立组件是否支持此功能，或者是否有办法通过独立组件传递参数？有没有任何链接/示例如何做到这一点？

谢谢

angular

2 个回答

  1. 您可以尝试params.get('folder')

    ngOnInit(): void {
    this.route.paramMap
      .subscribe(
        (params: any) => {
          console.log("value params folder:" + params.get('folder'));
          this.folder = params.get('folder');
        }
      }
  }

    您使用的访问方法可以完成，但我们需要监听属性params而不是paramMap

    ngOnInit(): void {
    this.route.params
      .subscribe(
        (params: any) => {
          console.log("value params folder:" + params);
          this.folder = params.folder;
        }
      }
  }
    • 0
  2. Best Answer

    简而言之，要从激活的路线中获取详细信息，您可以使用snapshot.paramMap以下内容。

    ngOnInit(): void {
    this.folder = this.route.snapshot.paramMap.get('folder');
}
    • 0

相关问题