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

【问题标题】：Why won't my Angular 2 component allow me to declare directives?为什么我的 Angular 2 组件不允许我声明指令？
【发布时间】：2017-04-05 04:26:05
【问题描述】：

不知何故，我在我的 Angular 2 应用程序上取得了相当大的进展，却从未真正了解如何或何时使用自定义/第三方指令。

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

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

未处理的 Promise 拒绝：模板解析错误：无法绑定到“ng-file-select”，因为它不是“输入”的已知属性。

我想这会在我真正让指令起作用时解决。

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

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

【问题讨论】：

你能提供你目前已经完成的代码吗？
NPM 网站上的示例似乎是针对旧版本的 angular2。 GitHub 上的示例对我来说看起来更可靠。 github.com/jkuri/ng2-uploader#basic-example
我用代码更新了我的帖子。
如retrospectacus链接的示例所示，有一个Ng2UploaderModule。使用它而不是 UPLOAD_DIRECTIVES，因为后者已经过时了。
I don't feel comfortable showing too much code - 如果您只是关心知识产权问题，请不要担心。值得窃取的算法不太可能适合问题帖子，我们非常热衷于关闭（在看到它的读者看来）不包含足够细节的问题。最好是过于详细，因为这样不太可能被搁置。

标签： angular directive

【解决方案1】：

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

你需要添加到

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

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

你可以尝试添加UPLOAD_DIRECTIVES到

@NgModule({
  declarations: [UPLOAD_DIRECTIVES]

但由于版本不兼容，我不认为这会起作用

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

【讨论】：

【解决方案2】：

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

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

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

在我的包中添加如下所示的主要属性定义后，它就起作用了！

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

希望这可以避免其他人的头痛！

【讨论】：