路由器内部链接<ngtemplate>重定向到仪表板/空路径

Question

>我有 2 个组件搜索元数据和添加元数据。

我在搜索 Meatadata 中有一个编辑按钮，单击它应该路由到添加元数据。

编辑按钮位于 ng-template <内>当我单击编辑按钮时，它会路由到仪表板。

但是当我在 标签之外添加编辑按钮时，它会正确路由到添加元数据

搜索元数据.html

<ngb-accordion   #acc="ngbAccordion" activeIds="ngb-panel-0"> 
    <ngb-panel [title]='(metadata.topic)?"Topic: "+metadata.topic:
    (metadata.item)?"Product: "+metadata.item:"EMPTY"' *ngFor="let metadata of  filteredData">
     <ng-template ngbPanelTitle> <button class="btn btn-default pull-right" 
     (click)="goToAddMetadata()"  >EDIT</button> </ng-template>
     <ng-template ngbPanelContent>
      <ul>
       <li *ngFor='let key of metadata | keys'>
       {{key.key}} : {{key.value}}
       </li>
   </ul>
  </ng-template>
  </ngb-panel>
  </ngb-accordion>

我的布局路由.模块.ts是这样的：

    const routes: Routes = [
    {
    path: '',
    component: LayoutComponent,
    children: [
        { path: '', redirectTo: 'dashboard' },
        { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
        { path: 'charts', loadChildren: './charts/charts.module#ChartsModule' },
        { path: 'tables', loadChildren: './tables/tables.module#TablesModule' },
        { path: 'forms', loadChildren: './form/form.module#FormModule' },
        { path: 'bs-element', loadChildren: './bs-element/bs-element.module#BsElementModule' },
        { path: 'grid', loadChildren: './grid/grid.module#GridModule' },
        { path: 'components', loadChildren: './bs-component/bs-component.module#BsComponentModule' },
        { path: 'blank-page', loadChildren: './blank-page/blank-page.module#BlankPageModule' },
        { path: 'add-metadata', loadChildren: './add-metadata/add-metadata.module#AddMetadataModule' },
        { path: 'view-metadata', loadChildren: './view-metadata/view-metadata.module#ViewMetadataModule' },
        { path: 'search-metadata', loadChildren: './search-metadata/search-metadata.module#SearchMetadataModule' }
    ]
}];

search-metadata.component.ts ：

    import { Component, OnInit, ViewChild, ElementRef, Input } from '@angular/core';
import { routerTransition } from '../../router.animations';
import { Router } from '@angular/router'; 
@Component({
    selector: 'app-search-metadata',
    templateUrl: './search-metadata.component.html',
    styleUrls: ['./search-metadata.component.scss'],
    animations: [routerTransition()]
})
export class SearchMetadataComponent implements OnInit {
    constructor(private data: DataService, private router: Router) {}
    ngOnInit() {
    }
    goToAddMetadata()
    {
        this.router.navigate(['add-metadata']);
        console.log("this shit is working");
    }
}

我在这里排除了任何不必要的代码

Answer 1

只需在按钮单击天才上$event.preventDefault(( ！！