Question

我想从仪表板进行路由。但它根本不起作用。这是ts文件：

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

import { Section }        from './sections';
import { SectionService } from './section.service';

@Component({
  moduleId: module.id,
  selector: 'my-dashboard',
  templateUrl: 'dashboard.component.html',
  styleUrls: [ 'dashboard.component.css' ],
  providers: [SectionService]
})
export class DashboardComponent implements OnInit {
  sections: Section[] = [];

  constructor(private sectionService: SectionService) { }

  ngOnInit(): void {
    this.sectionService.getSections()
      .then(sections => this.sections = sections.slice(0, 4));
  }
}

和html文件：

<h3>Sections</h3>
<div class="grid grid-pad">
  <a *ngFor="let section of sections" routerLink="['/detail', section.id]" class="col-1-4">
    <div class="module section">
      <h4>{{section.name}}</h4>
    </div>
  </a>
</div>
 <router-outlet></router-outlet>

有人可以解释什么是错的吗？

这是app.module.ts

const sectionRoutes: Routes = [
    { path: 'detail/:id', component: SectionDetailComponent}
];

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(sectionRoutes)
  ],

没有任何编译错误。只有我点击并且没有收到路由结果

Answer 1

我认为你必须使用[routerLink]而不是routerLink：

<a *ngFor="let section of sections" [routerLink]="['/detail', section.id]" class="col-1-4">
<div class="module section">
  <h4>{{section.name}}</h4>
</div>

https://angular.io/docs/ts/latest/api/router/index/RouterLink-directive.html

路由不起作用

1 个答案: