Доступ к RouterLinkActive во вложенном компоненте с помощью Angular 6 - PullRequest
Новая
       11

Доступ к RouterLinkActive во вложенном компоненте с помощью Angular 6

0 голосов
/ 04 мая 2018

У меня есть список-группа, определенная как список recipe-items . Я использую дочернюю маршрутизацию для отображения описания элемента всякий раз, когда пользователь нажимает на элемент списка. Пока что событие нажатия и маршрутизация работают, но Я хочу отметить выбранный элемент как активный .

рецепт-list.component.html 

<app-recipe-item 
  *ngFor="let recipeEl of recipes; let i = index" 
  [recipe]="recipeEl"
  [routerLink]="i"
  style="cursor: pointer;"
  >
</app-recipe-item>

Чтобы сделать это, я пытаюсь использовать директиву routerLinkActive внутри моего вложенного RecipeItemComponent, но похоже, что директива находится вне области действия для вложенного компонента.

рецепт-item.component.html 

<div class="list-group">
  <a 
    class="list-group-item list-group-item-action d-flex justify-content-between align-items-start"
    routerLinkActive="active"
    >
     TO BE MARKED AS ACTIVE WHEN CLICKED
  </a>
</div>

Что мне не хватает? Даже используя localRef невозможно получить его значение во вложенном компоненте.

Ответы [ 2 ]

0 голосов
/ 11 мая 2018

Использование директивы RouterLinkActive и ее свойства isActive

Используя RouterLinkActive и локальную ссылку, можно передать значение isActive в свойство @Input() вложенного компонента, чтобы использовать его в своем шаблоне для запуска ngClass.

рецепт-list.component.html 

 <app-recipe-item 
  *ngFor="let recipeEl of recipes; let i = index" 
  [recipe]="recipeEl"
  [routerLink]="i"
  routerLinkActive
  #rla="routerLinkActive"
  [currentlySelected]="rla.isActive"
  style="cursor: pointer;"
  >
</app-recipe-item>

рецепт-item.component.ts 

@Component({
  selector: 'app-recipe-item',
  templateUrl: './recipe-item.component.html',
  styleUrls: ['./recipe-item.component.css']
})
export class RecipeItemComponent implements OnInit {
  @Input() recipe: Recipe;
  @Input() currentlySelected: boolean;

рецепт-item.component.html 

...
<a [ngClass]="{active: currentlySelected}">
...
0 голосов
/ 04 мая 2018
Директива

routerLinkActive добавляет специальные стили в активную ссылку, подписавшись на событие навигации маршрутизатора, см. исходный код .

Вы можете сделать то же самое в компоненте app-recipe-item без использования директивы routerLinkActive (код тот же)

Другой способ, routerLinkActive предоставляет свойство isActive, которое показывает, активен ли текущий routerLink или нет. Вы также можете добавить его в качестве компонента, чтобы получить его значение и изменить его на активный стиль. 

<app-recipe-item 
  *ngFor="let recipeEl of recipes; 
  let i = index" [recipe]="recipeEl" 
  [routerLink]="i" style="cursor: pointer;"
  routerLinkActive
>
</app-recipe-item>

constructor(
  @Inject(RouterLinkActive) private activeRouter: RouterLinkActive  // inject
) { }

<a class="list-group-item list-group-item-action d-flex justify-content-between align-items-start"
  [ngClass]="{active: activeRouter.isActive}"
>
  TO BE MARKED AS ACTIVE WHEN CLICKED
</a>

См. демо .

...