Standardanweisungen in Angular

Question

Ich arbeite an einer gemeinsamen Sidebar-Komponente für meine Anwendung, die von einigen Modulen wiederverwendet wird.

Verwendung der Seitenleiste im Modul Benutzer, zum Beispiel könnte wie folgt aussehen:

<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="https://stackoverflow.com/users/create" 
 
        routerLinkActive="active" 
 
        [routerLinkActiveOptions]="{exact: true}"></sidebar-item> 
 

 
    <sidebar-item title="Manage Users" 
 
        icon="edit" 
 
        routerLink="https://stackoverflow.com/users/manage" 
 
        routerLinkActive="active" 
 
        [routerLinkActiveOptions]="{exact: true}"></sidebar-item> 
 
</sidebar>

Dieser Code wird in anderen Modulen sehen ziemlich ähnlich. Intern wird die Sidebar-Komponente gerendert, sodass die untergeordneten Elemente in einem <ng-content> Block Zugriff auf die unter Verwendung von @ContentChildren erstellten untergeordneten Elemente erhalten.

Was ich versuche, Problemumgehung ist die Notwendigkeit, routerLinkActive und routerLinkActiveOptions für jede Instanz von sidebar-item anzugeben. Sie werden immer gleich sein und damit das Styling funktioniert, muss routerLinkActive immer auf active eingestellt werden.

Gibt es eine Möglichkeit, dass ich das zum Laufen bringen kann, ohne diese Anweisungen wiederholen zu müssen (entweder durch Vorgabe eines voreingestellten Wertes oder auf andere Weise)?

Answer 1

Sie konnten die Sidebar-Artikel haben datengesteuerte zu sein:

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

Wo items ist:

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