綁定到routerlink指令的div的邊界？

我遇到了一個問題，使用routerLink的div在點擊時會變成藍色。我認爲我錯過了一些非常明顯的東西，甚至可能是我在瀏覽器中的配置或一些錯過的CSS樣式，所以如果是這樣的話，對修正的禮貌解釋將不勝感激。綁定到routerlink指令的div的邊界？

我已經把這個問題的基本演示放在這裏 - 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>

SOLUTION：從翔太Papiashvili。輪廓來自焦點選擇器。我不希望邊框，所以我消除它，並添加另一個焦點風格 -

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

來源

2017-04-16 David Streid

它的CSS outline屬性，這是輔助功能很重要，你可以閱讀更多：http://www.outlinenone.com/

如果你仍然想這樣做只是添加

.paddingDiv:focus { 
    outline: 0; 
}

到你的CSS

來源

2017-04-16 18:10:23

就是這樣！非常感謝。整個週末這讓我很困擾。我會看看文檔 –

不知道你所使用的路由器的版本，但由於3版本，您不能使用任何其他元素routerLink比a或button 。

如果您需要在div中使用它，請使用click事件以及Router和navigate。

來源

2017-04-16 17:34:35 unitario

謝謝。不幸的是，即使我刪除了routerLink的綁定並將其替換爲您的建議，我仍然看到藍色邊框。我也嘗試將div的標籤更改爲a，結果相同。任何其他想法？ –

綁定到routerlink指令的div的邊界？

回答

相關問題