コンポーネント上のディレクティブの使用

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であなたのセレクタを変更し、あなたの ngModule宣言に WrapperComponent、 AppComponentと DraggableDirectiveを追加したことを確認してください

：

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

// AppModule：

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