div의 경계가 routerlink 지시문에 바인드 되었습니까?

routerLink를 사용하는 div가 클릭 할 때 파란색 테두리로 표시되는 문제가 발생했습니다. 나는 아주 명백한 것, 아마도 브라우저 나 CSS 스타일을 놓친 구성 등을 놓치고 있다고 생각한다. 따라서 정정에 대한 예의 바른 설명은 그렇게 인정 될 것이다.div의 경계가 routerlink 지시문에 바인드 되었습니까?

여기에 문제의 기본 데모 인 https://github.com/DavidStreid/routingIssue을 넣었습니다. 이 문제를 만드는 코드 스 니펫은 src/app/allGreetings.component.html에 있습니다. 다른 인사말을 클릭하여 문제를 확인하려면 루트/routingIssue에서 "npm install; npm start"를 다운로드하면됩니다. 나는 크롬에서 이것을보고있다.

 <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>

편집 : 가 여기에 내가 여전히 파란색 테두리 볼 unitario의 제안에서 업데이트 된 버전입니다 -

 <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>

해결책 : 쇼타 Papiashvili에서 합니다. 윤곽선은 포커스 선택기에서옵니다. 당신이 사용하고 있지만, 버전 3 이후로 당신이 a 또는 button보다 다른 요소에 routerLink를 사용할 수있는 라우터의 버전 확인

.paddingDiv:focus { 
     outline: 0; 
     background-color: black; 
    }

출처

2017-04-16 David Streid

의 CSS 개요 속성

, 이것은 당신이에서 자세한 내용을보실 수 있습니다, 접근성이 매우 중요하다 . 불행히도 routerLink에 대한 바인딩을 제거하고 제안 사항으로 바꾼 경우에도 파란색 테두리가 계속 표시됩니다. 나는 또한 동일한 결과로 div에서 a로 태그를 변경하려고 시도했다. 다른 아이디어?

출처

2017-04-16 18:10:23

그게 다야! 정말 고맙습니다. 주말 내내이 일이 저를 괴롭혔습니다. 나는 의사를 살펴볼 것이다. –

되지 않음 - 나는 그것을 제거하고 다른 초점 스타일을 추가, 그래서 나는 국경을 원하지 않는다 .

div에서 사용해야하는 경우 Router 및 navigate과 함께 click 이벤트를 사용하십시오. 당신은 여전히 당신의 CSS를

출처

2017-04-16 17:34:35 unitario

덕분에

.paddingDiv:focus { outline: 0; }

추가를 수행하려는 경우 http://www.outlinenone.com/

: –

div의 경계가 routerlink 지시문에 바인드 되었습니까?

답변

관련 문제