本文介绍了错误:找不到主插座来加载“DashboardComponent"?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
限时送ChatGPT账号..我试图解决这个问题,但我不能.我是 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"的主要出口
我的代码是:
appponent.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
moduleId: module.id,
styleUrls: ['appponent.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';
}
dashboardponent.ts
import { Component, OnInit } from '@angular/core';
import { Hero } from './hero';
import { HeroService } from './hero.service';
@Component({
moduleId:module.id,
selector:'my-dashboard',
templateUrl: 'dashboardponent.html',
styleUrls: [ 'dashboardponent.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 './dashboardponent';
import { HeroesComponent } from './heroesponent';
import { HeroDetailComponent } from './hero-detailponent';
import { ShubhComponent } from './myponent';
import { MyComponent } from './myponent';
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: ['appponent.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屋!
更多推荐
[db:关键词]
发布评论