错误:找不到主插座来加载“DashboardComponent"? [英] Error: Cannot find primary outlet to load 'DashboardComponent'?

问题描述

我试图解决这个问题，但我不能.我是 angular 2 的新手.我正在创建一个应用程序.但是遇到了这个错误，谁能告诉我我做错了什么?错误是:

I tried to solve this issues but I couldn't. I am new in angular 2. i am creating an app. But got this error, can anyone suggest me that where i am doing wrong ? Error is:

例外:未捕获(承诺):错误:无法找到加载DashboardComponent"的主要出口

我的代码是:

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 {}

推荐答案

你应该定义一个 .您的 AppComponent 模板缺少此标记.这个标签是必要的，让路由器知道在哪里插入你在路由模块中定义的组件:

You should define a <router-outlet>. Your AppComponent template is missing this tag. This tag is necessary to let the router know where to insert your components defined in your routing module:

@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';
}

这篇关于错误:找不到主插座来加载“DashboardComponent"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！