Javascript Angular 2的组件装饰器中的directives属性发生了什么变化？

我正在使用脚手架/建立一个Angular 2网站。我按如下方式生成组件

ng g组件文件上传

我注意到生成的组件

file upload.component.ts

如下所示

@Component({
  selector: 'file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent implements OnInit {
 ...
}

import { Component, OnInit, Input } from '@angular/core';
import { NgClass, NgStyle } from '@angular/common';
import { FileSelectDirective, FileDropDirective, FileUploadModule, FileUploader, FileUploaderOptions } from 'ng2-file-upload';

[ts] Module '"/Users/jwayne/git/app-www/node_modules/ng2-file-upload/ng2-file-upload"' has no exported member 'FILE_UPLOAD_DIRECTIVES'.

@Component({
  selector: 'login-component',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
 ...
}

<login-component></login-component>

我需要在我自己的组件中使用这个组件。因此，我尝试在

@组件

装饰器上添加

指令

属性，但是，我在中遇到了一个错误

当我运行app

ng serve

时，我看到控制台中报告了以下错误

zone.js:388 Unhandled Promise rejection: Template parse errors: Can't bind to 'uploader' since it isn't a known property of 'div'. (" [ngClass]="{'nv-file-over': hasBaseDropZoneOver}" (fileOver)="fileOverBase($event)" [ERROR ->][uploader]="uploader" class="well my-drop-zone"> 医生说要用这个导入语句

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

但在VS代码中，它表示以下内容

@Component({
  selector: 'file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent implements OnInit {
 ...
}

import { Component, OnInit, Input } from '@angular/core';
import { NgClass, NgStyle } from '@angular/common';
import { FileSelectDirective, FileDropDirective, FileUploadModule, FileUploader, FileUploaderOptions } from 'ng2-file-upload';

[ts] Module '"/Users/jwayne/git/app-www/node_modules/ng2-file-upload/ng2-file-upload"' has no exported member 'FILE_UPLOAD_DIRECTIVES'.

@Component({
  selector: 'login-component',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
 ...
}

<login-component></login-component>

为了在另一个组件中使用它，我甚至不必再将它作为指令或类似的东西引用。例如，我有一个使用这个登录组件的默认组件。HTML如下所示

@Component({
  selector: 'file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent implements OnInit {
 ...
}

import { Component, OnInit, Input } from '@angular/core';
import { NgClass, NgStyle } from '@angular/common';
import { FileSelectDirective, FileDropDirective, FileUploadModule, FileUploader, FileUploaderOptions } from 'ng2-file-upload';

[ts] Module '"/Users/jwayne/git/app-www/node_modules/ng2-file-upload/ng2-file-upload"' has no exported member 'FILE_UPLOAD_DIRECTIVES'.

@Component({
  selector: 'login-component',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
 ...
}

<login-component></login-component>

尽管现在修改了app.module.ts文件

import { LoginComponent } from './login/login.component';
import { DefaultComponent } from './default/default.component';
@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DefaultComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot([
      { path: 'default', component: DefaultComponent },
      { path: 'main', component: MainComponent, canActivate: [ UserAuthGuard ] },
      { path: '', redirectTo: '/default', pathMatch: 'full' },
      { path: '**', redirectTo: '/default' }
    ])
  ],
  providers: [ 
    UserAuthGuard
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

---

所以，有很多事情要做，但首先，组件装饰器的directives属性发生了什么变化

文档似乎使用的是较旧的RC版本的Angular。与此同时，angular团队引入了

NgModule

s的概念，以更好地构建应用程序，避免重复使用的指令。因此，您不再声明

组件中使用的指令。有关这方面的详细信息，请查看

您正在使用的库也适应了这种情况，但文档可能还没有更改。检查存储库，查看您现在需要如何导入模块，并查看API更改。
文档似乎使用的是较旧的RC版本的Angular。与此同时，angular团队引入了
NgModule
s的概念，以更好地构建应用程序，避免重复使用的指令。因此，您不再声明
组件中使用的指令。有关这方面的详细信息，请查看

您正在使用的库也适应了这种情况，但文档可能还没有更改。检查并进入存储库，查看您现在需要如何导入模块，并查看API更改。
解决此问题的关键是导入
app.module.ts
中的指令，然后使用
@NgModule
声明它们。下面是
app.module.ts
的一段代码

import { FileSelectDirective, FileDropDirective} from 'ng2-file-upload';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    FileSelectDirective, FileDropDirective
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot([
      { path: 'default', component: DefaultComponent },
      { path: 'main', component: MainComponent, canActivate: [ UserAuthGuard ] },
      { path: '', redirectTo: '/default', pathMatch: 'full' },
      { path: '**', redirectTo: '/default' }
    ])
  ],
  providers: [ ... ],
  bootstrap: [AppComponent]
})
export class AppModule { }

在我的组件中，我仍然需要导入指令。这里还有一个片段

import { Component, OnInit, Input } from '@angular/core';
import { NgClass, NgStyle } from '@angular/common';
import { 
  FileSelectDirective,
  FileDropDirective, 
  FileUploader, 
  FileUploaderOptions 
} from 'ng2-file-upload';
import * as _ from 'lodash';
import { LoginService } from '../service/login.service';

@Component({
  selector: 'file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent implements OnInit {
  //body omitted
}

解决这个问题的关键是导入
app.module.ts
中的指令，然后用
@NgModule
声明它们。下面是
app.module.ts
的一段代码

import { FileSelectDirective, FileDropDirective} from 'ng2-file-upload';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    FileSelectDirective, FileDropDirective
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot([
      { path: 'default', component: DefaultComponent },
      { path: 'main', component: MainComponent, canActivate: [ UserAuthGuard ] },
      { path: '', redirectTo: '/default', pathMatch: 'full' },
      { path: '**', redirectTo: '/default' }
    ])
  ],
  providers: [ ... ],
  bootstrap: [AppComponent]
})
export class AppModule { }

在我的组件中，我仍然需要导入指令。这里还有一个片段

import { Component, OnInit, Input } from '@angular/core';
import { NgClass, NgStyle } from '@angular/common';
import { 
  FileSelectDirective,
  FileDropDirective, 
  FileUploader, 
  FileUploaderOptions 
} from 'ng2-file-upload';
import * as _ from 'lodash';
import { LoginService } from '../service/login.service';

@Component({
  selector: 'file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent implements OnInit {
  //body omitted
}