错误：找不到加载"仪表板组件"的主插座？

Question

我试图解决这个问题，但我做不到。我是角度 2 的新手。我正在创建一个应用程序。但是得到了这个错误，谁能建议我做错的地方？错误是：

异常：未捕获（承诺）：错误：找不到加载"仪表板组件"的主插座

我的代码是：

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  moduleId: module.id,
  styleUrls: ['app.component.css'],
  template: ` <h1>{{title}}</h1>
  <nav>
    <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
    <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
  </nav>
`,
})
export class AppComponent {
  title = 'Tour of Heroes';
}

dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import { Hero } from './hero';
import { HeroService } from './hero.service';
@Component({
    moduleId:module.id,
    selector:'my-dashboard',
    templateUrl: 'dashboard.component.html',
    styleUrls: [ 'dashboard.component.css' ]
})
export class DashboardComponent implements OnInit{
 heroes: Hero[] = [];
  constructor(private heroService: HeroService) { }
  ngOnInit(): void {
    this.heroService.getHeroes()
      .then(heroes => this.heroes = heroes.slice(1, 5));
  }
 }

app-routing-module.ts

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent }   from './dashboard.component';
import { HeroesComponent }      from './heroes.component';
import { HeroDetailComponent }  from './hero-detail.component';
import { ShubhComponent } from './my.component';
import { MyComponent } from './my.component';
const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard',  component: DashboardComponent },
  { path: 'detail/:id', component: HeroDetailComponent },
  { path: 'heroes',     component: HeroesComponent }
];
@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

Answer 1

你应该定义一个<router-outlet>。您的AppComponent模板缺少此标记。此标记是必需的，以使路由器知道将路由模块中定义的组件插入何处：

@Component({
  selector: 'my-app',
  moduleId: module.id,
  styleUrls: ['app.component.css'],
  template: ` <h1>{{title}}</h1>
  <nav>
    <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
    <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
  </nav>
  <router-outlet></router-outlet> <!-- here -->
`,
})
export class AppComponent {
  title = 'Tour of Heroes';
}