Question

我在我的尖角前端应用程序中使用星云，并且想要设置选定的活动链接。我该如何实现？

我尝试过使用menuItem的selected属性，但是它仅应用于item对象，并且没有[routerLinkActive]选项

@Component({
  selector: 'nebular-pages',
  styleUrls: ['nebular.component.scss'],
  template: `
    <ngx-sample-layout>
      <nb-menu [items]="menu"></nb-menu>
      <router-outlet></router-outlet>
    </ngx-sample-layout>
  `,
})
export class NebularComponent {
  menu: NbMenuItem[];
  constructor() { }
        this.menu = [
          {
            title: 'Page1',
            link: `/user/params`,
            icon: 'nb-grid-b-outline',
            home: true,
          },
          {
            title: 'Page2',
            link: '/user/options',
            icon: 'nb-arrow-thin-right',
          },

          {
            title: 'Page3',
            icon: 'nb-list',
            children:[
              {
                title: 'Costs',
                link: '/user/costs',
                icon: 'nb-arrow-thin-right',
              },
              {
                title: "Benifits",
                link: "/user/benifits",
                icon: "nb-compose"
              },
            ]
          },

        ];

Answer 1

尝试将pathMatch：'full'添加到菜单项

items: NbMenuItem[] = [
    {
      title: 'Login',
      icon: 'person-outline',
      link: '/login',
      pathMatch:'full'
    },
    {
      title: 'Register',
      icon: 'lock-outline',
      link: '/register',
      pathMatch:'full'
    },
    {
      title: 'Logout',
      icon: 'unlock-outline',
      link: '/logout',
      pathMatch:'full'
    },
  ];

Answer 2

也许您可以像这样使用活动的路由器链接

Student

因此，当用户访问路由器时，路由器将具有class1和class2

更新。以下是他们如何在github代码中使用routerLinkActive

<a routerLink="/user/b" [routerLinkActive]="['class1', 'class2']">Bob</a>

您可以阅读更多here

Active Link为角选择了Nbular

2 个答案: