Angular 锚定标记href在firefox中不起作用，但在chrome中可以正常工作

我有下面的代码在一个新的选项卡中打开链接。该代码在Chrome浏览器中运行良好，但在Firefox中不起作用。在谷歌搜索后，我发现锚定标记不应该直接包含在按钮中，因此我放置了一个div标记来包含锚定标记，但它仍然不起作用

<button type="button" (click)="getDirection(m.geometry.location.lat,m.geometry.location.lng)"  class="waves-effect waves-light btn directions"> 
         <div>
          <a href="https://www.google.com/maps/dir/?api=1&origin={{srcOriginLat}},{{srcOriginLng}}&destination={{srcDestinationLat}},{{srcDestinationLng}}&travelmode=driving" target='_blank'>{{'directions' | translate}} </a>
         </div>  
         </button>

---

我删除了按钮标签，并将href直接放在div中，效果很好

 <div (click)="getDirection(m.geometry.location.lat,m.geometry.location.lng)" class="waves-effect waves-light btn directions">
              <a href="https://www.google.com/maps/dir/?api=1&origin={{srcOriginLat}},{{srcOriginLng}}&destination={{srcDestinationLat}},{{srcDestinationLng}}&travelmode=driving"
                target='_blank'>{{'directions' | translate}} </a>
            </div>

---

下面的答案是公认的答案