<ngtemplate> 内的 routerLink 重定向到 dashboard/null 路径

Question

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

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

编辑按钮在内，当我点击编辑按钮时，它会路由到 仪表板.

但是当我在标签外添加编辑按钮时，它正确地路由到 add-metadata

搜索-metadata.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>

我的布局-routing.module.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' }
    ]
}];

搜索-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() !!

<ngtemplate> 内的 routerLink 重定向到 dashboard/null 路径

routerLink inside <ngtemplate> redirecting to dashboard/null path

angular

routerlink

ng-template