Question

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

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

编辑按钮位于＆lt; NG-模板＆GT;当我点击编辑按钮时，它会路由到 信息中心 。

但是当我在外面添加编辑按钮时＆lt; NG＆GT;标签，它正确地路由到添加元数据

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

我的layout-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' }
    ]
}];

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

routerLink内部<ngtemplate>重定向到仪表板/空路径

1 个答案: