Выбрана активная ссылка Nebular для Angular - PullRequest
Новая
       15

Выбрана активная ссылка Nebular для Angular

0 голосов
/ 05 июня 2019

Я использую nebular в своем угловом фронтальном приложении и хочу установить активную ссылку выбранной. как мне этого добиться?

Я пробовал с выбранным свойством menuItem, но оно применяется только к объекту 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"
              },
            ]
          },

        ];

1 Ответ

0 голосов
/ 05 июня 2019

Может быть, вы можете использовать активную ссылку маршрутизатора, как это 

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

Таким образом, когда пользователь посещает маршрутизатор, маршрутизатор будет иметь class1 и class2

Обновление. Ниже описано, как они используют routerLinkActive в github-коде

. 
@Component({
  selector: 'nb-components-list',
  styleUrls: [ './components-list.component.scss' ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div *ngFor="let component of components" class="component-block">
      <span *ngIf="!component.component">{{ component.path }}</span>
      <a *ngIf="component.link"
         [routerLink]="component.link"
         routerLinkActive="active"
         [routerLinkActiveOptions]="{ exact: true }"
         #link="routerLinkActive"
         class="component-link">
        {{ component.name }}
        <ng-container *ngIf="link.isActive"> - active</ng-container>
      </a>
      <nb-components-list *ngIf="component.children" vertical [components]="component.children">
      </nb-components-list>
    </div>
  `,
})

Вы можете прочитать больше здесь

...