在組件元素上使用指令

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