Question

我正在尝试一个简单的代码，但我无法使其正常工作。我对角度有点了解，但这真让我感到沮丧。 ;（

app.component.html

<body-component></body-component>

body.component.html

<h1>HELLO WORLD</h1>

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

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

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, BodyComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

这里有什么问题？我得到错误body-component不是已知元素。请帮忙。

编辑：

body.component.ts
import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'body-component',
  templateUrl: 'body.component.html'
})
export class BodyComponent  { }

app.component.ts

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'my-app',
  templateUrl: 'app.component.html'
})
export class AppComponent  { name = 'Angular'; }

Answer 1

//our root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'


@Component({
  selector: 'body-component',
  template: `
<h1>HELLO WORLD</h1>
  `,
})
export class BodyComponent {
  name:string;
  constructor() {
    this.name = 'Angular2'
  }
}

@Component({
  selector: 'my-app',
  template: `
    <body-component></body-component>
  `,
})
export class App {
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, BodyComponent ],
  bootstrap: [ App ]
})
export class AppModule {}

Plunker example

body-component不是使用angular quickstart的已知元素

1 个答案: