angular2 - 模板没有出现

Question

我遇到了一个问题，我的 app.component.ts 和 superheroes.ts 中的模板无法加载。（我正在做一个类似于 Angular 英雄之旅教程的测试项目，但使用 Django 后端。）将显示标题（即 "You are in the Hall of Heroes"），我的 app.components.ts 非常清楚正在读取文件，但 "Welcome!" 未加载，超级英雄列表也未加载。（编辑：当我运行时，我在控制台中也没有收到任何错误。一切似乎都在正确编译。）

app.component.ts

import { Component } from '@angular/core';
import { HeroComponent } from './components/hero/superheroes'
import { HeroService } from './services/heroService'

@Component({
  selector: 'app-root',
  template: `<div>
           <h1>Welcome!</h1>
           <superheroes></superheroes>
         </div>`,
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = "You are in the Hall of Heroes";
}

superheroes.ts

import { Component, OnInit } from '@angular/core';
import { HeroService } from '../../services/heroService'

@Component({
  selector: 'superheroes',
  template: `
    <ul><li *ngFor="let hero of heroes">{{hero.name}}</li></ul>
  `
})
export class HeroComponent implements OnInit {
  heroes: any[];
  error: any;

  constructor(private heroService: HeroService) { }

  getHeroes() {
    this.heroService
      .getHeroes()
      .then(heroes => this.heroes = heroes)
      .catch(error => this.error = error);
  }

  ngOnInit() {
    this.getHeroes();
  }
}

heroService.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

import 'rxjs/add/operator/toPromise';

@Injectable()
export class HeroService {
  private apiURL = 'http://localhost:8000/superheroes/?format=json';

  constructor(private http: Http) { }

  getHeroes() {
    return this.http.get(this.apiURL)
      .toPromise()
      .then(response => response.json())
      .catch(this.handleError);
  }

  private handleError(error: any) {
    console.error('An error occurred', error);
    return Promise.reject(error.message || error);
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { HeroComponent } from './components/hero/superheroes';
import { HeroService } from './services/heroService';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    HeroComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [HeroService],
  bootstrap: [AppComponent]
})
export class AppModule { }

我真的为此绞尽脑汁，但我无法摆脱我错过了一些非常明显的东西的感觉。如果你需要我添加任何额外的 code/explain 我有什么，就这么说，我会编辑我的 post，但我认为这很好。

Answer 1

问题是您在 AppComponent 上定义了 template 和 templateUrl。所以 angular 选择 HTML 文件设置为 templateUrl 作为组件模板。

设置template或templateUrl，我建议使用templateUrl:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = "You are in the Hall of Heroes";
}

并将模板字符串移动到 app.component.html:

<div>
  <h1>Welcome!</h1>
  <superheroes></superheroes>
</div>

angular2 - 模板没有出现

angular2 - template not appearing

angular2-template

angular