找不到要加载的主要插座

Question

我有一个无法加载简单组件的应用程序。我认为它很简单，但我完全想念它。

我的组件：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import {PageStat}   from './PageStat';
import {PageStatService} from './pageStatService';
@Component({
    moduleId: module.id,
    selector: 'PageStats',
    template: '<h2>You Made it!</h2>',
    styleUrls: ['./basestyle.css']
})
export class PageStatsComponent implements OnInit{
    pagestats: PageStat[];
    selectedStat: PageStat;
    constructor(
        private router: Router,
        private pagestatservice: PageStatService){}
    getPageStatList(){
    this.pagestatservice.getPageStats().then(pagestats => this.pagestats = pagestats)

    }
    ngOnInit(): void {
    this.getPageStatList();
    }
    onSelect(selectpagestat: PageStat){
        this.selectedStat = selectpagestat;
    }
    gotoDetail(): void {
        this.router.navigate(['/detail', this.selectedStat.refid]);
    }
}

这是我的应用程序路由：

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { PageStatsComponent }      from './PageStats.component';
import { PageStatDetailComponent }  from './pagestat-detail.component';

const routes: Routes = [
  { path: '', redirectTo: '/pageStats', pathMatch: 'full' },
  { path: 'pagestats/detail/:id', component: PageStatDetailComponent },
  { path: 'pageStats',     component: PageStatsComponent }
];

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

我尝试从组件中剥离不同的部分，但结果似乎没有任何改变。我试图从“英雄之旅”的例子中复制出来。我看到很多关于“路由器插座”的引用，但英雄之旅应用程序没有，而且它可以工作，所以我不能 100% 确定为什么或在哪里需要放置一个。

编辑：完整错误：错误：找不到加载“PageStatsComponent”的主要出口

Answer 1

你需要一个

<router-outlet></router-outlet>

在您的 HTML 中的某个位置，以便它知道在哪里显示当前路由的 HTML。

在您的顶级组件中执行此操作..

template: '<h2>here is the rest of my HTML for the top level component</h2><router-outlet></router-outlet>'