在Component元素上使用指令

Question

我正在尝试锻炼，如果这是可能的。

我试图在组件元素上放置一个指令

WrapperComponent.ts

@Component({
    selector: 'app-wrapper',
    template: '<div><app-component draggable></app-component></div>'
})
export class WrapperComponent implements OnInit {
    constructor() {
    }
    ngOnInit() {
      //Code Here
    }
}

AppComponent.ts

@Component({
    selector: 'app-component',
    template: '<div>Sample Text</div>'
})
export class AppComponent implements OnInit {
    constructor() {
    }
    ngOnInit() {
      //Code Here
    }
}

DraggableDirective.ts

@directive({
    selector: '[draggable]',
})
export class DraggableDirective implements OnInit {
    constructor(private _element: ElementRef, renderer: Renderer) {
    }
    ngOnInit() {
      //Code Here
    }
}

但是当我这样做的时候，我得到了这个错误

zone.js:355 Unhandled Promise rejection: Template parse errors:
Can't bind to 'Draggable' since it isn't a known property of 'app-component'.
1. If 'app-component' is an Angular component and it has 'draggable' input, then verify that it is part of this module.
2. If 'app-component' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("<div>
    <app-component [ardDraggable]="true"></app-component>
</div>")

是否有我错过的东西，使组件识别属性作为一个指令，而不是为组件的输入。

Answer 1

更改AppComponent的选择器，并确保已将WrapperComponent, AppComponent和DraggableDirective添加到ngModule声明中:

@Component({
  selector: 'app-component',
  template: '<div>Sample Text</div>'
})

//AppModule:

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, WrapperComponent, DraggableDirective ],
  bootstrap:    [ WrapperComponent ]
})