javascript - 指令在应用程序中不起作用

Question

我不知道如何让指令在我的应用程序中工作。我想将指令应用于组件，这是最简单的形式。

import {Directive, HostBinding} from '@angular/core';

@Directive({
  selector: '[directiveSelector]'
})

export class FirstDirective {

  @HostBinding() innerText = 'not working';

}

...

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

@Component({
  selector: 'home',
  template: `
    <h1 directiveSelector>Test</h1>`
})

export class HomeComponent {

}

...

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

import { AppComponent } from './app.component';
import { HomeModule } from "./home/home.module";
import { FirstDirective } from './directives/first.directive';


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

有谁知道我在这里缺少什么？ Home 渲染良好，是一个包裹在模块中的组件。另外，我无法让调试器或警报在指令中触发 - 可能是模板绑定(bind)有问题？

Answer 1

在您的 HomeModule 中声明 FirstDirective，它应该会处理它。在这里，我假设您的 HomeComponent 是 homemodule 的一部分。

我自己尝试将它从模块中删除，没有产生任何错误，但也没有用。