Question

我有一个导航组件，其中包含来自Web服务的元素列表：

<a routerLink="/home"><button type="button" class="btn btn-default btn-md">Go Home</button></a>

此外，在同一个导航组件中，我有一个主页按钮：

<!-- static nav bar -->
<app-navigation></app-navigation>
<!-- /#page-content-wrapper -->
        <div id="page-content-wrapper">
            <div class="container-fluid">
                <router-outlet></router-outlet>
            </div>
        </div>

在我的app.component中，我只有两个元素，导航组件和路由器组件。路由器组件是我将显示/ home组件和/ task / id组件的位置。

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MainViewComponent } from './main-view/main-view.component';

import { ViewTaskComponent } from './view-task/view-task.component';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: MainViewComponent },
  { path: 'task/:id', component: ViewTaskComponent }


];


@NgModule({
    imports: [ RouterModule.forRoot(routes) ],
    exports: [ RouterModule ]
})
export class AppRoutingModule {}

发生了什么： 如果我在任何任务/ *然后我点击主页按钮，它工作正常。反之亦然。
如果我在/ home然后我点击任务/ 1，它就会进入任务。 但是如果我在一个任务/ 1组件中，然后我点击其他任务/ 2没有发生任何事情。好吧，发生了一些事情， URL更改，但仍然在任务/ 1页面

这是我的app-routing类：

import { Component, OnInit, Input } from '@angular/core';
import { task } from '../task';

// The HeroDetailComponent needs a new way to obtain the hero-to-display.
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';

import { TaskService } from '../task.service';


@Component({
  selector: 'app-view-task',
  templateUrl: './view-task.component.html',
  styleUrls: ['./view-task.component.css']
})
export class ViewTaskComponent implements OnInit {
    @Input() task: task;

    constructor(
// The ActivatedRoute holds information about the route to this instance of the HeroDetailComponent. 
      private route: ActivatedRoute,
// The HeroService gets task data from the remote server and this component will use it to get the task-to-display.
      private taskService: TaskService,
// The location is an Angular service for interacting with the browser. 
      private location: Location
    ) {}
// linkExtract the id route parameter
    ngOnInit(): void {
      this.getTask();
    }

    getTask(): void {
// The route.snapshot is a static image of the route information shortly after the component was created.
// The paramMap is a dictionary of route parameter values extracted from the URL. 
// The "id" key returns the id of the task to fetch.
// The JavaScript (+) operator converts the string to a number
      const id = +this.route.snapshot.paramMap.get('id');
      this.taskService.getTask(id)
        .subscribe(task => this.task = task);
    }


}

这是我的任务视图类：

{{1}}

Answer 1

我遇到了同样的问题：

task component：

constructor(private route: ActivatedRoute, private http: HttpClient) {
  this.route.params.subscribe(params => {
    // whenever the url change get your task
    this.getTask(params.id);
  });
}

// getTask might something like that
getTask(id) {
  this.http.get(`baseUrl/tasks/${id}`)
    .then(task => {
      this.task = task;
    })
    .catch(err=>console.error(err));
}

这可能是另一种解决方案，但这就是我解决问题的方式

Answer 2

假设你的任务结构没问题：

Dim oXMLDom1 As New DOMDocument40

以下是详细描述此内容的文章的链接：https://angular.io/api/router/RouterLink

角度路由器链接不起作用

2 个答案: