Angular 4中的文件上传

Question

当我尝试在我的角度4应用程序中安装"npm install ng2-file-upload --save"时,它会抛出

UNMET PEER DEPENDENCY @4.1.0
UNMET PEER DEPENDENCY @4.1.0
`-- ng2-file-upload@1.2.1

并上传不起作用我的应用程序抛出

"无法绑定到'上传者',因为它不是'输入'的已知属性"

这是我的HTML

<input type="file" ng2FileSelect [uploader]="upload" multiple formControlName="file" id="file"/>

及其组成部分

import { FileUploadModule } from 'ng2-file-upload/ng2-file-upload';   
import { FileSelectDirective, FileUploader } from 'ng2-file-upload/ng2-file-
upload';

export class PersonalInfoComponent implements OnInit
{
    public upload:FileUploader= new FileUploader({url:""});
}

父模块

import { FileUploadModule } from 'ng2-file-upload/ng2-file-upload';

@NgModule({

imports: [
..
....
..
FileUploadModule
],

export class RegistrationModule { }

我没有在AppModule(Grand Parent Module)中导入/更改任何内容.

请有人帮我这个...

Answer 1

常见的解决方案是创建新模块，例如shared module. 您只需要像这样创建共享模块并在app.module文件中导入共享模块

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { FileSelectDirective, FileDropDirective } from 'ng2-file-upload';
import { FileUploadModule } from 'ng2-file-upload/ng2-file-upload';

@NgModule({
     imports: [ FileUploadModule],  
     declarations: [ ],
     exports :[ FileSelectDirective, FileDropDirective, FormsModule,
               FileUploadModule],
})
export class SharedModule { }

只需像这样在您的 app.module 中导入 share.module 即可。

import { NgModule } from '@angular/core';
import { SharedModule} from '../shared/shared.module';

@NgModule({
    imports: [SharedModule],
    declarations: [],
    exports :[],
   })
export class AppModule { }

看看 Angular 4 中的延迟加载