Question

我的应用程序中的路径不同，并且希望在标签中为每条路线显示一个标题。

我目前制作了一些看起来像这样的变量：

export const ROUTES: Routes = {
  pages: {
    public: {
      path: '',
      link: '/',
      children: {
        signIn: {
          path: 'sign-in',
          link: '/sign-in',
        },
        passwordChangeConfirmation: {
          path: 'password-change/:token',
          link: '/password-change',
        },
      },
    },
 }
}

和另一个带有名称和图标

export const ROUTE_DISPLAY = {
  [ROUTES.pages.public.children.signIn.link]: {
    title: 'PUBLIC.SIGN_IN.TITLE',
    icon: 'assets/svg/report-light.svg',
  },
  [ROUTES.pages.public.children.passwordChangeConfirmation.link]: {
    title: 'PUBLIC.CHANGE_PASSWORD.TITLE',
    icon: 'assets/svg/report-light.svg',
  },

然后我在函数中得到这样的名字

return ROUTE_DISPLAY[router?.state?.url]

效果很好，但是如果网址中包含参数（如:token）将无法正常工作。

我是否必须执行手动功能以删除最终的参数等？还是有一些路由器方法可以为路由分配标题？

Answer 1

这是https://angular.io/api/router/Route#route的用途。您可以像这样向每条路线添加title变量

    var routes = [ 
       {
          path:"users",
          component:"Users component",
          data:{
             title:"users"
          }
       }  
   ]

，然后使用router?.data?.title属性而不是router?.state?.url

匹配名称自定义标题的路由名称

1 个答案: