Question

我试图按照angualrJS 2.0教程调用另一个组件中的另一个组件。但是，我收到一条错误消息，指出它不是<main-footer></main-footer>选择器上的已知元素。我做错了什么？

//app.component.ts
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES }  from '@angular/router';
import { FooterComponent } from './footer.component';

@Component({
  selector: 'my-app',
  // use templateurl for template files
  template: `
    <h1>My First Angular App 22</h1>
    <main-footer></main-footer>
  `,
   directives: [FooterComponent]
})
export class AppComponent { 

}

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

@Component({
  selector: 'main-footer',
  template: `
    <h2>The footer</h2>
  `,
})
export class FooterComponent{ 

}

修改

所以我通过在app.module.ts和app.component.ts文件中声明并导入文件来实现它。感谢@Chang的帮助我在AngualrJS 2.0的教程中没有看到这个< / p>

// app.module.ts
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { FooterComponent }   from './footer.component';
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, FooterComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Answer 1

可以尝试在app.modules中声明“FooterComponent”吗？

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    InMemoryWebApiModule.forRoot(InMemoryDataService),
    routing
  ],
  declarations: [
    AppComponent,
    FooterComponent
  ],
  providers: [

  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

AngularJS 2在另一个

1 个答案: