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]);
    }
}

这是我的app-routing：

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

我尝试从组件中剥离不同的部分，似乎没有任何改变结果。我试图从英雄之旅中克隆这一点。例。我看到很多对路由器插座的引用＆＃34;但是英雄之旅应用程序并没有一个可行，所以我不能100％确定为什么或需要放置一个。

编辑：完整错误：错误：无法找到要加载的主要插座＆＃39; PageStatsComponent＆＃39;

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>'

找不到主插座加载

1 个答案: