Question

我试图解决这个问题，但我无法解决。我是角度2的新手。我正在创建一个应用程序。但是得到了这个错误，任何人都可以建议我在哪里做错了吗？错误是：

例外：未捕获（承诺）：错误：无法找到要加载的主要插座＆＃39; DashboardComponent＆＃39;

我的代码是：

app.component.ts

       settings = {
           aoColumnDefs: [
            {
                orderSequence: ["desc", "asc"],
                aTargets: ['_all']
            }
        ]};

        $('.dataTable').DataTable(settings);

dashboard.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';
}

应用路由-module.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));
  }
 }

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

错误：无法找到要加载的主要插座＆＃39; DashboardComponent＆＃39;？

1 个答案: