Angular 角度2:Can'；t绑定到'；上传器'；因为它不是'；t'的已知属性；输入'；

我正在尝试将ng2文件上传模块集成到我的应用程序中

我得到这个模板错误：无法绑定到“uploader”，因为它不是“input”的已知属性

更新文件夹str:

/src/app/app.module.ts

/src/app/components/layout/
                           layout.module.ts
                           other layout components files

                  /category-items
                            category-items.module.ts
                            category-items.component.ts

在layout.module.ts中

import { LayoutComponent } from './layout.component';

declarations: [
    LayoutComponent,

import { CategoryItemsComponent } from './category-items.component';

import {FileUploadModule} from "ng2-file-upload";   

imports: [  ...FileUploadModule ... ]   

 import {FileUploadModule} from "ng2-file-upload";   

 imports: [  ...FileUploadModule ... ]  

import { FileUploader } from 'ng2-file-upload';

@Component({
  selector: 'button-view',
  template: `

  <input type="file" class="form-control" name="single" ng2FileSelect [uploader]="uploader" />   

  `
  })

export class ButtonViewComponent implements ViewCell, OnInit {

...
 public uploader:FileUploader = new FileUploader({url:'http://lcoalhost:5000/upload'});

}

@Component({
  selector: 'app-category-items',
  templateUrl: './category-items.component.html',
  styleUrls: ['./category-items.component.scss']
})

export class CategoryItemsComponent implements OnInit {
...
}

import { FileSelectDirective } from 'ng2-file-upload';
@NgModule({
    imports: [
        ...
],
    declarations: [
        FileSelectDirective
    ],
    providers: [
        ...
],
    bootstrap: [
        App,
    ],
})

分类项目中的.module.ts

import { LayoutComponent } from './layout.component';

declarations: [
    LayoutComponent,

import { CategoryItemsComponent } from './category-items.component';

import {FileUploadModule} from "ng2-file-upload";   

imports: [  ...FileUploadModule ... ]   

 import {FileUploadModule} from "ng2-file-upload";   

 imports: [  ...FileUploadModule ... ]  

import { FileUploader } from 'ng2-file-upload';

@Component({
  selector: 'button-view',
  template: `

  <input type="file" class="form-control" name="single" ng2FileSelect [uploader]="uploader" />   

  `
  })

export class ButtonViewComponent implements ViewCell, OnInit {

...
 public uploader:FileUploader = new FileUploader({url:'http://lcoalhost:5000/upload'});

}

@Component({
  selector: 'app-category-items',
  templateUrl: './category-items.component.html',
  styleUrls: ['./category-items.component.scss']
})

export class CategoryItemsComponent implements OnInit {
...
}

import { FileSelectDirective } from 'ng2-file-upload';
@NgModule({
    imports: [
        ...
],
    declarations: [
        FileSelectDirective
    ],
    providers: [
        ...
],
    bootstrap: [
        App,
    ],
})

app\app.module.ts

import { LayoutComponent } from './layout.component';

declarations: [
    LayoutComponent,

import { CategoryItemsComponent } from './category-items.component';

import {FileUploadModule} from "ng2-file-upload";   

imports: [  ...FileUploadModule ... ]   

 import {FileUploadModule} from "ng2-file-upload";   

 imports: [  ...FileUploadModule ... ]  

import { FileUploader } from 'ng2-file-upload';

@Component({
  selector: 'button-view',
  template: `

  <input type="file" class="form-control" name="single" ng2FileSelect [uploader]="uploader" />   

  `
  })

export class ButtonViewComponent implements ViewCell, OnInit {

...
 public uploader:FileUploader = new FileUploader({url:'http://lcoalhost:5000/upload'});

}

@Component({
  selector: 'app-category-items',
  templateUrl: './category-items.component.html',
  styleUrls: ['./category-items.component.scss']
})

export class CategoryItemsComponent implements OnInit {
...
}

import { FileSelectDirective } from 'ng2-file-upload';
@NgModule({
    imports: [
        ...
],
    declarations: [
        FileSelectDirective
    ],
    providers: [
        ...
],
    bootstrap: [
        App,
    ],
})

app\components\layout\category items\category items.component.ts

import { LayoutComponent } from './layout.component';

declarations: [
    LayoutComponent,

import { CategoryItemsComponent } from './category-items.component';

import {FileUploadModule} from "ng2-file-upload";   

imports: [  ...FileUploadModule ... ]   

 import {FileUploadModule} from "ng2-file-upload";   

 imports: [  ...FileUploadModule ... ]  

import { FileUploader } from 'ng2-file-upload';

@Component({
  selector: 'button-view',
  template: `

  <input type="file" class="form-control" name="single" ng2FileSelect [uploader]="uploader" />   

  `
  })

export class ButtonViewComponent implements ViewCell, OnInit {

...
 public uploader:FileUploader = new FileUploader({url:'http://lcoalhost:5000/upload'});

}

@Component({
  selector: 'app-category-items',
  templateUrl: './category-items.component.html',
  styleUrls: ['./category-items.component.scss']
})

export class CategoryItemsComponent implements OnInit {
...
}

import { FileSelectDirective } from 'ng2-file-upload';
@NgModule({
    imports: [
        ...
],
    declarations: [
        FileSelectDirective
    ],
    providers: [
        ...
],
    bootstrap: [
        App,
    ],
})

从“ng2文件上传”导入{FileUploader}；
@组成部分({
选择器：“按钮视图”，
模板：`
`
})
导出类按钮ViewComponent实现ViewCell，OnInit{
...
公共上载程序：FileUploader=新的FileUploader（{url:'http://lcoalhost:5000/upload'});
}
@组成部分({
选择器：“应用程序类别项目”，
templateUrl:'./category items.component.html'，
样式URL:['./类别项.component.scss']
})
导出类CategoryItemsComponent实现OnInit{
...
}

或者，如果我像下面这样尝试：我会得到意外的结束div标记

<div ng2FileDrop
         (fileOver)-'fileOverBase($event)'
         [uploader]="uploader"
         class="well my-drop-zone">
        Base drop zone
    </div>

底降区

在我的app.module中，我在不同的帖子中尝试了多种导入组合，但在我的案例中似乎都不起作用

错误堆栈跟踪：

/src/app/app.module.ts

/src/app/components/layout/
                           layout.module.ts
                           other layout components files

                  /category-items
                            category-items.module.ts
                            category-items.component.ts

“未捕获（承诺中）：错误：模板分析错误：↵无法绑定到“uploader”，因为它不是“input”的已知属性（“↵ ↵ 已经在谷歌上搜索了许多帖子，寻找同样的解决方案：

一些参考文献是：（但没有任何帮助）

---

您需要在使用

'upload'

声明组件的模块中导入

FileUploadModule

，在您的情况下，这将是

类别项。module.ts

分类项目.module.ts

import { LayoutComponent } from './layout.component';

declarations: [
    LayoutComponent,

import { CategoryItemsComponent } from './category-items.component';

import {FileUploadModule} from "ng2-file-upload";   

imports: [  ...FileUploadModule ... ]   

 import {FileUploadModule} from "ng2-file-upload";   

 imports: [  ...FileUploadModule ... ]  

import { FileUploader } from 'ng2-file-upload';

@Component({
  selector: 'button-view',
  template: `

  <input type="file" class="form-control" name="single" ng2FileSelect [uploader]="uploader" />   

  `
  })

export class ButtonViewComponent implements ViewCell, OnInit {

...
 public uploader:FileUploader = new FileUploader({url:'http://lcoalhost:5000/upload'});

}

@Component({
  selector: 'app-category-items',
  templateUrl: './category-items.component.html',
  styleUrls: ['./category-items.component.scss']
})

export class CategoryItemsComponent implements OnInit {
...
}

import { FileSelectDirective } from 'ng2-file-upload';
@NgModule({
    imports: [
        ...
],
    declarations: [
        FileSelectDirective
    ],
    providers: [
        ...
],
    bootstrap: [
        App,
    ],
})

从“/category items.component”导入{CategoryItemsComponent}；
从“ng2文件上载”导入{FileUploadModule}；//应在此处导入
导入：[…FileUploadModule…]//正确的位置

将此添加到app.module.ts

import { LayoutComponent } from './layout.component';

declarations: [
    LayoutComponent,

import { CategoryItemsComponent } from './category-items.component';

import {FileUploadModule} from "ng2-file-upload";   

imports: [  ...FileUploadModule ... ]   

 import {FileUploadModule} from "ng2-file-upload";   

 imports: [  ...FileUploadModule ... ]  

import { FileUploader } from 'ng2-file-upload';

@Component({
  selector: 'button-view',
  template: `

  <input type="file" class="form-control" name="single" ng2FileSelect [uploader]="uploader" />   

  `
  })

export class ButtonViewComponent implements ViewCell, OnInit {

...
 public uploader:FileUploader = new FileUploader({url:'http://lcoalhost:5000/upload'});

}

@Component({
  selector: 'app-category-items',
  templateUrl: './category-items.component.html',
  styleUrls: ['./category-items.component.scss']
})

export class CategoryItemsComponent implements OnInit {
...
}

import { FileSelectDirective } from 'ng2-file-upload';
@NgModule({
    imports: [
        ...
],
    declarations: [
        FileSelectDirective
    ],
    providers: [
        ...
],
    bootstrap: [
        App,
    ],
})

或尝试将FIleUploadModule导入每个父模块

从“ng2文件上载”导入{FIleUploadModule}

imports: [
    FIleUploadModule,
    ..........,
    ........,
    ......,

]

---

它应该可以工作。

您是否将

文件上传模块

导入到与

类别项组件

相同的模块中？即：

类别项组件

是否仅在app.module.ts中声明？是否已更新了我的文件夹str，请告诉我缺少什么或我应该验证什么？我怀疑您没有即时消息将模块移植到正确的模块中-category-items.module.ts你能粘贴它吗？这样我就可以验证了哦，伙计，我得到了它…感谢剩下的部分，我必须在category-items.module.tsI下导入FileUploadModule。我将把它作为一个答案添加到以后的用户中。谢谢，我已经用有效的答案更新了这个问题！也许这样会更好未来的用户阅读该问题，试图将其与自己的情况相匹配，如果答案不在问题中？您可以按修复前的状态发布组件，我可以在此处显示修复版本是的，谢谢@Ompurdy，已经回复了我的问题…您还可以在回答中提及我在c之前和之后导入的位置orrection@phyme你也在那里导入了它并不重要，所以我不建议删除它，以防其他人也需要在那里导入它。是的！这正是我要找的。文档需要更新。