2016-11-21 4 views
0

Я так или иначе получил довольно далеко от моего приложения Angular 2, даже не узнав, как и когда использовать пользовательские/сторонние директивы.Почему мой компонент Angular 2 не позволяет мне объявлять директивы?

В любом случае, я пытаюсь использовать ng2-uploader, чтобы пользователи могли загружать изображения в форме и в rc6. Мне нужно объявить директивы в моем компоненте. Согласно документации по ссылке я представил, мне нужно просто импортировать UPLOAD_DIRECTIVES в директивы моего компонента собственности, но я получаю ошибку о том, что директивы не является свойством компонента. Это не может быть так, не так ли?

У меня есть модуль ng2-uploader и UPLOAD_DIRECTIVES, импортированные в app.module.ts, без ошибок. Если я пытаюсь использовать директивы за оригинальные документы для NG2-пользователя, я получаю:

Unhandled Promise отказ: ошибки шаблона синтаксического анализа: не может связываться с «нг-файла выберите», поскольку он ISN» t известное свойство «ввода».

Я предполагаю, что это будет разрешено, когда я действительно смогу заставить директивы работать.

Я чувствую, что мне не хватает чего-то глупого очевидного. Вот некоторые разделы, где проблема, вероятно, существует.

app.component (не имеет значения кода опущены):

import { Ng2Uploader, UPLOAD_DIRECTIVES } from 'ng2-uploader'; 
@NgModule({ 
    imports: [ 
     Ng2Uploader, 
    ], 
    declarations: [ 
     UPLOAD_DIRECTIVES 
    ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule {} 

компонентов, где будут использованы директивы:

import { UPLOAD_DIRECTIVES } from 'ng2-uploader'; 
@Component({ 
    selector: "quote-form-partial", 
    templateUrl: "./app/components/partials/quote-form-partial/quote-form-partial.component.html", 
    directives: [UPLOAD_DIRECTIVES] 
}) 

    uploadFile: any; 
    hasBaseDropZoneOver: boolean = false; 
    options: Object = { 
     url: '/uploads' 
    }; 

    handleUpload(data): void { 
     data = JSON.parse(data.response); 
     this.uploadFile = data; 
    } 

    fileOverBase(e:any): void { 
     this.hasBaseDropZoneOver = e; 
    } 

Шаблон HTML:

<input type="file" 
     [ng-file-select]="options" 
     (onUpload)="handleUpload($event)"> 
+1

Не могли бы вы предоставить код, который вы разработали до сих пор? –

+1

Примеры на сайте NPM, похоже, для старой версии angular2. Примеры на GitHub выглядят более надежными для меня. https://github.com/jkuri/ng2-uploader#basic-example – retrospectacus

+0

Я обновил сообщение с кодом. – Smaft

ответ

4

directives на @Component() и @Directive() Безразлично Больше не существует.

Вы должны добавить его в

@NgModule({ 
    imports: [Ng2UploaderModule], 
    ... 

Я не знаю, если такой модуль на самом деле существует, но если вы хотите использовать его с последней версией Angular2, требуется.

Вы можете попробовать добавить UPLOAD_DIRECTIVES к

@NgModule({ 
    declarations: [UPLOAD_DIRECTIVES] 

, но я бы не ожидал работать из-за версии несовместимости

Смотрите также https://angular.io/docs/ts/latest/guide/ngmodule.html

0

Ладно, все ваш вклад помог точки меня в правильном направлении, так что спасибо.

Я действительно сделал все правильно на раннем этапе, прежде чем начал использовать устаревшие методы из отчаяния (лишения?).

Проблема действительно существовала в моей системеjs.config, которую я, вероятно, должен был включить в мой первоначальный пост.В моем ng2-uploader package Я не указал ng2-uploader.js, поэтому мое приложение пыталось использовать несуществующий index.js.

Как только я добавил основное определение свойства в свои пакеты, как показано ниже, он сработал!

'ng2-uploader': { 
    main: './ng2-uploader.js', 
    defaultExtension: 'js' 
} 

Надеюсь, это спасет кого-то еще от головной боли!

Смежные вопросы