使用 Angular 6 在嵌套组件中访问 RouterLinkActive

Question

我有一个列表组定义为 食谱项目 的列表。我正在使用子路由，以便在用户单击列表元素时显示项目的描述。到目前为止，点击事件和路由都在工作，但我想将点击的项目标记为活动。

食谱-list.component.html

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

为了做到这一点，我尝试在我的嵌套 RecipeItemComponent 中使用 routerLinkActive 指令，但看起来该指令超出了嵌套组件的范围。

食谱-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 也无法在嵌套组件中检索它的值。

Answer 1

routerLinkActive 指令通过订阅路由器的导航事件为激活的 link 添加特殊样式，参见 source code.

您也可以在 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>

参考demo.

Answer 2

使用 `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}">
...

使用 Angular 6 在嵌套组件中访问 RouterLinkActive

Accessing RouterLinkActive in a nested component using Angular 6

angular2-routing

angular

angular6

使用 `RouterLinkActive` 指令及其属性 `isActive`

使用 Angular 6 在嵌套组件中访问 RouterLinkActive

Accessing RouterLinkActive in a nested component using Angular 6

angular2-routing

angular

angular6

使用 RouterLinkActive 指令及其 属性 isActive

使用 `RouterLinkActive` 指令及其属性 `isActive`