Angular中的默认指令

Question

我正在为我的应用程序的共享侧栏组件工作，该组件将由几个模块重复使用。

例如，使用用户模块中的侧边栏可能看起来如下：

<sidebar>
  <sidebar-item title="Users"
                   icon="people"
                   routerLink="/users"
                   routerLinkActive="active"
                   [routerLinkActiveOptions]="{exact: true}"></sidebar-item>
  <sidebar-item title="Create User"
                   icon="add_circle"
                   routerLink="/users/create"
                   routerLinkActive="active"
                   [routerLinkActiveOptions]="{exact: true}"></sidebar-item>
  <sidebar-item title="Manage Users"
                   icon="edit"
                   routerLink="/users/manage"
                   routerLinkActive="active"
                   [routerLinkActiveOptions]="{exact: true}"></sidebar-item>
</sidebar>

此代码在其他模块中看起来非常相似。在内部，侧栏组件在<ng-content>块中渲染其孩子，可以使用@ContentChildren访问孩子。

我正在尝试解决方法的是需要在sidebar-item的每个实例上指定routerLinkActive和routerLinkActiveOptions。它们始终将是相同的，要使样式工作，routerLinkActive需要始终设置为active。

有什么办法可以使它起作用，而无需重复这些指令（通过设置默认值或其他方式）？

Answer 1

您可以具有数据驱动的侧边栏 - 项目：

<sidebar-item *ngFor="let item of items" [title]="item.title"
               [icon]="item.icon"
               [routerLink]="item.link"
               routerLinkActive="active"
               [routerLinkActiveOptions]="{exact: true}"></sidebar-item>

其中 items是：

[
   {  title: 'Users', icon: 'people', link:'/users' },
   {  title: 'Create User', icon: 'add_circle', link:'/users/create' },
   {  title: 'Manage Users', icon: 'edit', link:'/users/manage' }
]