Использование директив на компоненте компонента

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