导航后Angular 6重定向回首页

Question

我在Angular 6应用程序中遇到问题，该应用程序可以成功导航到另一个视图，但是它会自动将我重定向回索引视图。我成功地在屏幕上看到了组件的内容，ngOnInit被触发，并且我也可以从ActivatedRoute中获得路由参数。

如果我在地址栏中手动输入URL，它不会导航回首页。

有人可以看到我要去哪里了吗？提前加油。

更新1

如果我使用a而不是button，它不会重定向。

<!-- this will cause the route to redirect back -->
<button 
  class="btn btn-default btn-sm pull-right"
  [routerLink]="['/destination', _destination.placeId]">
  Edit...
</button>

<!-- This works! -->
<a 
  class="btn btn-default btn-sm pull-right" 
  [routerLink]="['/destination', _destination.placeId]">
  Edit (LINK)
</a>

app.module.ts-路线

RouterModule.forRoot([
  { path: '', component: HomeComponent, pathMatch: 'full' },
  { path: 'destination/:id', component: EditDestinationComponent }
], { enableTracing: true })

导航触发器

<button 
  class="btn btn-default btn-sm pull-right"
  [routerLink]="['/destination', _destination.placeId]">
  Edit...
</button>

edit-destination.component.ts

@Component({
  selector: 'app-edit-destination',
  templateUrl: './edit-destination.component.html',
  styleUrls: ['./edit-destination.component.css']
})
export class EditDestinationComponent implements OnInit {

  constructor(
    private route: ActivatedRoute
  ) { }

  ngOnInit() {
    console.log('loaded edit-destination');
    this.route.paramMap
      .pipe(
        tap((params: ParamMap) => console.log(`destination: ${params.get('id')}`))
      )
      .subscribe();
  }

}

edit-destination.component.html

<p>
  edit-destination works!
</p>

路由器跟踪

Answer 1

就我而言，我在标记中使用了一个表单标签，因此我发现当用户单击按钮时，它会触发“表单发布”。在 click 事件的最后一行代码中添加 return false; 即可解决问题。