He encontrado un problema en el que los divs que usan routerLink se bordean en azul cuando se hace clic en ellos. Creo que me estoy perdiendo algo muy obvio, posiblemente incluso una configuración que tengo en mi navegador o algún estilo css perdido, por lo que agradecería una explicación cortés de la solución si es así.
Reuní una demostración básica del problema aquí: https://github.com/DavidStreid/routingIssue . El fragmento de código que crea este problema se encuentra en src/app/allGreetings.component.html y lo pongo a continuación. Simplemente descargue y "npm install; npm start" desde la raíz, /routingIssue, para ver el problema haciendo clic en los diferentes saludos. Estoy viendo esto en cromo.
<div *ngFor="let greeting of greetings" class="col-xs-12 col-md-6 col-lg-4"> <div class="paddingDiv" [routerLink]="greeting.routerLink"> <h3 class="greetingType">{{greeting.title}}</h3> </div> </div>EDITAR: Aquí hay una versión actualizada de la sugerencia de unitario donde todavía veo el borde azul:
<a *ngFor="let greeting of greetings" class="col-xs-12 col-md-6 col-lg-4"> <a class="paddingDiv" (click)="onSelect(greeting)"> <h3 class="greetingType">{{greeting.title}}</h3> </a> </a>SOLUCIÓN: De Shota Papiashvili. El contorno proviene del selector de enfoque. No quiero el borde, así que lo eliminé y agregué otro estilo de enfoque:
.paddingDiv:focus { outline: 0; background-color: black; }su propiedad de contorno css, esto es muy importante para la accesibilidad, puede leer más en: http://www.outlinenone.com/
si todavía quieres hacerlo solo agrega
.paddingDiv:focus { outline: 0; }a tu CSS
No estoy seguro de qué versión del enrutador está usando, pero desde la versión 3 no puede usar routerLink en ningún otro elemento que no sea a button o .
Si necesita usarlo en un div , use un evento de click junto con Router y navigate .
Sí, la respuesta aprobada eliminará el esquema de un selector específico.
Si desea eliminar el esquema de todo [routerLink] en todo el proyecto, el CSS a continuación será más útil.
*[ng-reflect-router-link]:focus { outline: none; }