指令在组件外部不起作用

Question

我有一个 Angular 2 Directive 如下：

import { DOM } from 'angular2/src/platform/dom/dom_adapter';
import {Directive, ElementRef, Renderer} from 'angular2/core'

@Directive({
    selector: '[headerBG]',
    host: {
        '(click)': 'onClick()'
    }
})
export class HeaderBGDirective {

    constructor(private el: ElementRef, private renderer: Renderer) {   
    }
    onClick() {
        console.log(1234);
    }
}

如果我将此应用于 body 元素：

<body headerBG>

它不起作用。

但是如果我把它放在另一个组件中，它就可以正常工作:

@Component({
selector: 'courses',
template: `<h2>
            {{title}}
            <input type='text' headerBG/>
          </h2>
          <ul>
              <li *ngFor="#course of courses">
              {{course}}
              </li>
          </ul>
          `,
          providers: [CourseService],
          directives: [HeaderBGDirective]
})

这是正确的行为还是我遗漏了什么？如何将指令应用于 body 元素而不使其成为组件？

编辑：

import {Component} from 'angular2/core';
import {HeaderComponent} from 'modules/shared/directives/header.component';
import {HeaderBGDirective} from 'modules/shared/directives/headerBG.directive';

@Component({
    selector: 'body',
    templateUrl: './welcome/templates/welcome.html',
    directives: [HeaderComponent, HeaderBGDirective]
})
export class AppComponent {
    post = {
        title: 'Favorite',
        isFavorite: true
    }
 }

在welcome.html中：

<sc-header></sc-header><div>some content</div>

Answer 1

Angular 指令不应在组件外部使用。 Angular2 应用程序的根是由

实例化的组件

bootstrap(AppComponent)

其他组件和指令仅在此类根组件或此根组件的后代组件中起作用。

Answer 2

我认为这是一个 bootstrapping 问题。当你bootstrap angular 2、你指定应用组件

在下面取自 https://github.com/johnpapa/angular2-tour-of-heroes/blob/master/app/main.ts 的示例中，AppComponent 作为 my-app 的选择器。因此它会找到与选择器匹配的元素，并且范围仅限于该元素（及其后代）。

import { bootstrap }    from 'angular2/platform/browser';
import { AppComponent } from './app.component';

bootstrap(AppComponent);

因此您的应用程序组件需要有一个 body 选择器才能工作。选择 body 可能会有问题，但我没有尝试确定。

指令在组件外部不起作用

Directive not working outside a component

typescript

angular2-directives

angular