在组件元素上使用指令

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 ] 
})