Question

我已经在某种程度上与我的Angular 2应用程序相处得很远，而没有真正学习如何或何时使用自定义/第三方指令。

无论如何，我正在尝试使用layoutparams来允许用户上传带有表单的图像，而在rc6中我必须在我的组件中声明指令。根据我提供的链接中的文档，我需要简单地将UPLOAD_DIRECTIVES导入到我的组件的指令属性，但是我收到一条错误，指出指令不属于的成分即可。那可能不对，可以吗？

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

未处理的承诺拒绝：模板解析错误：无法绑定到'ng-file-select'，因为它不是'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中，我可能应该将其包含在原帖中。在我的 ng2-uploader 包中，我没有指定 ng2-uploader.js ，所以我的应用程序试图使用不存在的 index.js

一旦我在我的包中添加了主要属性定义，如下所示，它就可以了！

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

希望这会让别人头疼！

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

2 个答案: