How to get dynamic parameter in functional canActivate guard without ActivatedRoute in Angular v16?

huangapple go评论61阅读模式
英文:

How to get dynamic parameter in functional canActivate guard without ActivatedRoute in Angular v16?

问题

我尝试在Angular v16中实现一个可用的canActivate守卫,但我在获取动态路由参数时遇到了问题。我想在守卫函数中访问路由中的用户名和ID参数,但当我尝试使用route.snapshot.paramMap.get('paramName')来获取它们时,它们总是返回null。以下是我的守卫函数示例:

export const postGuard = () => {
  const route = inject(ActivatedRoute);
  const username = route.snapshot.paramMap.get('username') as string;
  const id = route.snapshot.paramMap.get('id') as string;
  console.log(username); // 总是null
  return true;
};

我已经在我的守卫函数中注入了ActivatedRoute,但用户名和ID参数没有正确填充。console.log(username)语句总是显示null。

在Angular v16中,是否有其他方法可以在函数式canActivate守卫中获取动态路由参数,而不使用ActivatedRoute?我将非常感谢任何关于正确方法的见解或示例。谢谢!

英文:

I'm trying to implement a functional canActivate guard in Angular v16, but I'm facing an issue with retrieving dynamic route parameters. I want to access the username and id parameters from the route in my guard function, but when I try to retrieve them using route.snapshot.paramMap.get('paramName'), they always return null. Here's an example of my guard function:

typescript

export const postGuard = () => {
  const route = inject(ActivatedRoute);
  const username = route.snapshot.paramMap.get('username') as string;
  const id = route.snapshot.paramMap.get('id') as string;
  console.log(username); // Always null
  return true;
};

I have already injected the ActivatedRoute in my guard function, but the username and id parameters are not being populated correctly. The console.log(username) statement always shows null.

Is there any other way to retrieve the dynamic route parameters in a functional canActivate guard without using ActivatedRoute in Angular v16? I would greatly appreciate any insights or examples demonstrating the correct approach to achieve this. Thank you!

答案1

得分: 1

我发现这篇来自Angular文档的文章很有帮助。

我通过使用CanActivateFn作为类型并传入ActivatedRouteSnapshot和RouterStateSnapshot作为参数来获取动态参数。现在我只需调用路由并获取动态参数。

export const postGuard: CanActivateFn = (
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
) => {
  // 获取动态路由参数
  const id = route.paramMap.get('id') as string;
  const username = route.paramMap.get('username') as string;
  console.log('id: ', id);
  console.log('username: ', username);

  return true;
};
英文:

I found this article from Angular documentation helpful.

I figured out how to get the dynamic parameters by using CanActivateFn as a type and passing in ActivatedRouteSnapshot & RouterStateSnapshot as a parameter. Now I can just call the route and get the dynamic param.

export const postGuard: CanActivateFn = (
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
) => {
  // get dynamic route params
  const id = route.paramMap.get('id') as string;
  const username = route.paramMap.get('username') as string;
  console.log('id: ', id);
  console.log('username: ', username);

  return true;
};

答案2

得分: 0

在 Angular 16+ 中有很多很好的解决方案,但首先需要在路由文件中导入。

@NgModule({
  imports: [RouterModule.forRoot([], { bindToComponentInputs: true })],
})

然后我们可以以各种方式使用它。

const routes: Routes = [
  {
    path: "search/:id",
    component: SearchComponent,
    data: { title: "Search" },
    resolve: { searchData: SearchDataResolver }
  },
];

@Component({})
export class SearchComponent {
    @Input() query?: string; // this will come from the query params
    @Input() id?: string; // this will come from the path params
    @Input() title?: string; // this will come from the data
    @Input() searchData?: any; // this will come from the resolved data 
}

没有 Ng init 或其他什么。任何类型的附加数据都可以直接在 @Input 中使用。

Angular 16 发布说明: https://blog.angular.io/angular-v16-is-here-4d7a28ec680d
查看如何将路由数据传递给组件输入的说明: https://itnext.io/bind-route-info-to-component-inputs-new-router-feature-1d747e559dc4 原始文章关于这个功能。

英文:

In Angular 16 + There are much good solution but first you need to import in Route File.

@NgModule({
  imports: [RouterModule.forRoot([], { bindToComponentInputs: true })],
})

Then we can use in various ways like

const routes: Routes = [
  {
    path: "search/:id",
    component: SearchComponent,
    data: { title: "Search" },
    resolve: { searchData: SearchDataResolver }
  },
];


@Component({})
export class SearchComponent {
    @Input() query?: string; // this will come from the query params
    @Input() id?: string; // this will come from the path params
    @Input() title?: string; // this will come from the data
    @Input() searchData?: any; // this will come from the resolved data 

}

No Ng init or something else. Any kind of additional data can directly use in @Input.

Angular 16 Release Note https://blog.angular.io/angular-v16-is-here-4d7a28ec680dCheck check Passing router data as component inputs

https://itnext.io/bind-route-info-to-component-inputs-new-router-feature-1d747e559dc4 Original article On this feature

huangapple
  • 本文由 发表于 2023年5月30日 08:26:48
  • 转载请务必保留本文链接:https://go.coder-hub.com/76360955.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定