Angular 16 路由组件新功能

在Angular 16 之前， 我们可能需要这么做：

private route = inject(ActivatedRoute);
private id: string | null = null;

ngOnInit(): void {
this.id = this.route.snapshot.paramMap.get('id');
console.log(this.id);
}

从 Angular 16 开始，您可以将路径参数、查询参数、解析程序和数据属性绑定到路由组件的输入。这允许您在不注入激活的路由的情况下检索该数据。

若要启用此新功能，需要使用 withComponentInputBinding 函数作为应用程序配置对象中的 provideRouter 函数的一部分。

请记住，如果发生冲突，优先级将按以下顺序设置：

• 解析程序和数据属性，
• 然后是路径参数，
• 最后是查询参数。

AD4CE9B9-1123-48C1-92C0-E12C438E55AE.jpeg

D52A8B40-5966-4C16-86CB-463253C26055.jpeg