角度 7 导航问题 - routerLink 未重定向到另一个页面答案

【问题标题】：angular 7 navigation issue- routerLink not redirecting to another page角度 7 导航问题 - routerLink 未重定向到另一个页面
【发布时间】：2020-09-08 03:28:23
【问题描述】：

这就是我的第一个组件从节点 web api 中列出数据的方式。当我点击主题时，它不会重定向到下一页。

//列出所有独特的主题

@Component({
  selector: 'app-root',
  template: `<ul>
      <li *ngFor="let subject of subjects">
     <a [routerLink]="['/student/',subject.subjectId]" >{{subject.subject}}</a>
      </li>
  </ul>`,
  styleUrls: ['./app.component.css']
})
//fetch unique subjects using node api
export class AppComponent implements OnInit {
  title = 'List unique Subjects';
  subjects: any = [];

  constructor(private httpClient: HttpClient){}
  ngOnInit(){
    this.httpClient.get('http://localhost:5000/api/Subject').subscribe(data =>{


      console.log(data);
      this.subjects = data;
    })
  }
}

这是我的第二个组件。它在控制台中显示错误 Uncaught TypeError: Cannot read property ‘innerHTML’ of undefined

@Component({
  selector: 'app-student',
  templateUrl: './student.component.html',
  template: `<ul>
      <li *ngFor="let student of students">
      {{student.studentId}}
      </li>
  </ul>`,

  styleUrls: ['./student.component.css']
})

//fetch student details according to the passing subject id
export class StudentComponent implements OnInit {
    title = 'Student list';
    students: any = [];

 constructor(private httpClient: HttpClient){}
  ngOnInit(//alert(this.activeAouter.snapshot.params['id'])
  ){
    this.httpClient.get('http://localhost:5000/api/Student/ACC3TAX').subscribe(data =>{


      console.log(data);
      this.students = data;
    })
  }
}

和我的路由模块

  const routes: Routes = [
   { path: '', component: AppComponent },

{ path: '/student/:id',component: studentComponent },

    ];

【问题讨论】：

在 AppComponent 中：{{subject.subject}} ----> '学生'在小情况下。在 Routes 中：{ path: 'api/Student/:id',redirectTo: 'home', pathMatch: 'full' } ----> 'Student' 是驼峰式的。这可能是由于大小写不匹配。

标签： angular redirect routes navigation

【解决方案1】：

您可以执行以下操作，

在你的 routing.module.ts 中，

编辑路径，到api/student/:id

在您的 app.component.ts 中，

去掉/student/中多余的/

template: <ul>
               <li *ngFor="let subject of subjects">
                 <a [routerLink]="['api/student', subject.subjectId]" >{{subject.subject}}</a>
               </li>
          </ul>

另外，在你的 student.component.ts 文件中，您正在使用 templateUrl 和 template。您应该根据视图的复杂程度使用其中之一。

【讨论】：

【解决方案2】：

您的代码中有一些需要修复的地方：

1) 您不需要在角度路由中声明 api 端点，而是在您的应用程序路由中声明，因此在您的路由器中，路径 api/Student/:id 应该是 Student/:id（如果需要，您甚至可以使用 api 前缀，但在这里看起来像一个错误:)）。在此之后，您应该从 [routerLink]="['/Student/',subject.subjectId]" 中删除学生之前的前导 /

2) 您在同一个装饰器中使用templateUrl 和template，它们必须是唯一的，因此您必须在它们之间进行选择。

我还建议您在调试时在您的应用程序中启用路由器跟踪，这样您就可以获得有关路由错误的更多信息。您可以通过这种方式启用它：

imports: [
    RouterModule.forRoot(
      routes,
      { enableTracing: true } // <-- debugging purposes only
    )
]

【讨论】：

【解决方案3】：

我看到 2 个问题。

如果您要在组件中使用[routerLink]="['/student...，那么path: 'api/Student/:id' 实际上应该是path: 'student/:id'。

路由模块

const routes: Routes = [
  { path: 'home', component: StudentComponent },
  { path: 'student/:id',redirectTo: 'home', pathMatch: 'full' }
];

删除'/student/ 末尾的正斜杠。将[routerLink]="['/student/',subject.subjectId]" 替换为[routerLink]="['/student',subject.subjectId]"。

组件模板

<a [routerLink]="['/student', subject?.subjectId]" >{{subject.subject}}</a>

【讨论】：