为什么我的 Angular 2 组件不允许我声明指令？

Question

我的 Angular 2 应用程序不知何故已经走得很远，但从未真正学习如何或何时使用 custom/third-party 指令。

无论如何，我正在尝试使用 ng2-uploader 来允许用户使用表单上传图像，并且在 rc6 中我必须在我的组件中声明指令。根据我提供的 link 中的文档，我需要简单地将 UPLOAD_DIRECTIVES 导入到我的组件的指令属性，但我收到了一个错误说 directives 不是 component 的属性。这不可能吧？

我在 app.module.ts 中导入了 ng2-uploader 模块和 UPLOAD_DIRECTIVES，没有错误。如果我尝试使用 ng2-uploader 原始文档中的指令，我会得到：

Unhandled Promise rejection: Template parse errors: Can't bind to 'ng-file-select' since it isn't a known property of 'input'.

我想当我真的能让指令起作用时，这个问题就会得到解决。

我觉得我错过了一些非常明显的东西。以下是一些可能存在问题的部分。

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)">

Answer 1

directives 在 @Component() 和 @Directive() 上不存在了。

您需要将其添加到

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

我不知道这样的模块是否真的存在，但如果你想在最新的 Angular2 版本中使用它，它是必需的。

你可以试试把UPLOAD_DIRECTIVES加到

@NgModule({
  declarations: [UPLOAD_DIRECTIVES]

但由于版本不兼容，我不希望它起作用

另见 https://angular.io/docs/ts/latest/guide/ngmodule.html

Answer 2

好的，您的所有意见都帮助我指明了正确的方向，谢谢。

在我出于绝望（绝望？）开始尝试使用已弃用的技术之前，我实际上早就正确地完成了所有事情。

这个问题实际上存在于我的 systemjs.config 中，我可能应该将其包含在我的原始 post 中。在我的 ng2-uploader 包中，我没有指定 ng2-uploader.js，所以我的应用试图使用不存在的 index.js.

在我的包中添加主要属性定义后，如下所示，它成功了！

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

希望这会让其他人头疼！

为什么我的 Angular 2 组件不允许我声明指令？

Why won't my Angular 2 component allow me to declare directives?

directive

angular