web-dev-qa-db-fra.com

Matériel angulaire 5 - Comment définir le lien d’annonce

Comment définir les liens d'ancrage pour qu'ils soient actifs dans mon implémentation?.

.html 

<mat-nav-list class="conversation-list">
    <mat-list-item *ngFor="let conversation of conversations">
        <a (click)="goToChat(conversation)">{{getOtherUsers(conversation)}}</a>
    </mat-list-item>
</mat-nav-list>

<div class="chat-box">
    <router-outlet></router-outlet>
</div>

.ts 

goToChat(conversation) {
    this.router.navigate(['main/chat/', conversation._id]);
}

.routing.module.ts 

import { ChatComponent } from './chat.component';
import { ChatDetailComponent } from './chat-detail/chat-detail.component';

const CHAT_ROUTES = [
    {
        path: '',
        component: ChatComponent,
        children: [
            {
                path: ':id',
                component: ChatDetailComponent
            }
        ]
    },
];

Le code ci-dessus passe en boucle sur une conversation utilisateur et crée une liste des utilisateurs avec lesquels il discute. Chaque élément de la liste est un lien vers un composant de discussion à droite de la page. Lorsque l'utilisateur clique sur un lien et que je souhaite l'activer.

angularangular-material
4
Kay

L'ancre est définie pour avoir la classe "active" en ajoutant la directive routerLinkActive: 

<mat-nav-list>
    <a mat-list-item routerLinkActive="active">{{link.title}}</a>
</mat-nav-list>

Le problème est qu'il n'y a apparemment aucun style défini pour un état actif dans le package Angular Material:

matériau-angulaire/src/lib/list/_list-theme.scss

matériau-angulaire/src/lib/list/list.scss

donc un style actif doit être défini: 

.mat-nav-list a.active {
    background: blue;
}
7
LuJaks

Définissez le routerLink sur le chemin de la route et la propriété routerLinkActive sur la classe à indiquer active.

Par exemple:

<a [routerLink]=`main/chat/'${conversation._id}` 
    routerLinkActive="active-link">{{getOtherUsers(conversation)}}</a>

maintenant utiliser css pour cibler

.active-link {
    background-color: grey;
}

Remarque: routerLinkActive est une propriété de routerLink. Elle ne peut être utilisée qu’avec routerLink.

2
mounds

Vous pouvez utiliser la classe .mat-list-item-focus pour centrer l'élément de liste:

<mat-nav-list>
  <mat-list-item class="mat-list-item-focus">Focused List Item</mat-list-item>
  <mat-list-item>Not Focused List Item</mat-list-item>
</mat-nav-list>
1
Michael Wilson