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访问子项。

我正在尝试解决的问题是需要在routerLinkActive的每个实例上指定routerLinkActiveOptions和sidebar-item。它们总是相同的，并且要使样式起作用，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' }
]

Angular中的默认指令

1 个答案: