在AngularJS 2中调用指令

AngularJS 2 calling a directive inside another one

本文关键字：调用 指令 AngularJS      更新时间：2023-09-26

我正在尝试遵循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的帮助，我没有在angalrjs 2.0的教程中看到这个

// 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 { }

可以尝试在app.modules中声明"FooterComponent"吗?

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    InMemoryWebApiModule.forRoot(InMemoryDataService),
    routing
  ],
  declarations: [
    AppComponent,
    FooterComponent
  ],
  providers: [
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}
相关文章：