Angular 2 的组件装饰器中的指令 属性 发生了什么？
What happened to the directives property in the Component decorator for Angular 2?
我正在使用 Angular CLI v1.0.0-beta.19-3 到 scaffold/build 一个 Angular 2 网站。我按如下方式生成我的组件 ng g component file-upload。
我注意到生成的组件 file-upload.component.ts 如下所示。
@Component({
selector: 'file-upload',
templateUrl: './file-upload.component.html',
styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent implements OnInit {
...
}
我需要使用这个组件，ng2-file-upload, inside my own component. So I try to add the directives property on the @Component decorator, however, I get an error in VS Code。
@Component({
selector: 'file-upload',
templateUrl: './file-upload.component.html',
styleUrls: ['./file-upload.component.css'],
directives: [ FILE_UPLOAD_DIRECTIVES ]
})
export class FileUploadComponent implements OnInit {
...
}
[ts] '{ 选择器类型的参数：字符串；模板网址：字符串；样式网址：字符串[]；指令：未定义[]； }' 不可分配给 'Component' 类型的参数。
对象字面量只能指定已知属性，并且 'directives' 不存在于类型 'Component' 中。
我的导入如下所示。
import { Component, OnInit, Input } from '@angular/core';
import { NgClass, NgStyle } from '@angular/common';
import { FileSelectDirective, FileDropDirective, FileUploadModule, FileUploader, FileUploaderOptions } from 'ng2-file-upload';
当我 运行 应用程序 ng serve 时，我看到控制台中报告了以下错误。
zone.js:388 未处理的 Promise 拒绝：模板解析错误：
无法绑定到 'uploader'，因为它不是 'div' 的已知 属性。 ("
[ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
(fileOver)="fileOverBase($event)"
[错误 ->][上传者]="uploader"
class="well my-drop-zone">
这是我在 package.json 中的依赖项。
{
"name": "app-www",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@angular/common": "~2.1.1",
"@angular/compiler": "~2.1.1",
"@angular/core": "~2.1.1",
"@angular/forms": "~2.1.1",
"@angular/http": "~2.1.1",
"@angular/platform-browser": "~2.1.1",
"@angular/platform-browser-dynamic": "~2.1.1",
"@angular/router": "~3.1.1",
"angular2-cookie": "^1.2.5",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"jquery": "^3.1.1",
"lodash": "^4.16.6",
"ng2-bootstrap": "^1.1.16",
"ng2-file-upload": "^1.1.2",
"rxjs": "5.0.0-beta.12",
"ts-helpers": "^1.1.1",
"zone.js": "^0.6.25"
},
"devDependencies": {
"@types/jasmine": "^2.2.30",
"@types/lodash": "^4.14.38",
"@types/node": "^6.0.45",
"angular-cli": "1.0.0-beta.19-3",
"codelyzer": "1.0.0-beta.1",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "4.0.9",
"ts-node": "1.2.1",
"tslint": "3.13.0",
"typescript": "~2.0.3",
"webdriver-manager": "10.2.5"
}
}
文档说要使用这个导入语句。
import { FILE_UPLOAD_DIRECTIVES } from 'ng2-file-upload';
但在 VS Code 中，它表示如下。
[ts] 模块“/Users/jwayne/git/app-www/node_modules/ng2-file-upload/ng2-file-upload”'没有导出成员 'FILE_UPLOAD_DIRECTIVES'。
更有趣的是，我创建了自己的登录组件，如下所示。
@Component({
selector: 'login-component',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
...
}
为了在另一个组件中使用它，我什至不必再将它作为指令或类似的东西来引用。例如，我有一个使用此登录组件的默认组件。 HTML 如下所示。
<login-component></login-component>
代码如下所示（注意组件装饰器没有指令 属性）。
@Component({
selector: 'app-default',
templateUrl: './default.component.html',
styleUrls: ['./default.component.css']
})
export class DefaultComponent implements OnInit, OnDestroy {
...
}
虽然现在修改了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 { }
所以，有很多事情要做，但首先，组件装饰器的指令 属性 发生了什么？
文档似乎使用的是 Angular 的旧 RC 版本。与此同时，angular 团队引入了 NgModules 的概念，以更好地构建您的应用程序并避免重复使用的指令。所以你不再声明在 Component 装饰器中使用的指令。有关详细信息，请查看 angular docs on NgModule.
您使用的库也适用于此，但文档可能尚未更改。检查存储库中的 their demo code and this commit 以查看您现在需要如何导入模块并查看 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
}
我正在使用 Angular CLI v1.0.0-beta.19-3 到 scaffold/build 一个 Angular 2 网站。我按如下方式生成我的组件 ng g component file-upload。
我注意到生成的组件 file-upload.component.ts 如下所示。
@Component({
selector: 'file-upload',
templateUrl: './file-upload.component.html',
styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent implements OnInit {
...
}
我需要使用这个组件，ng2-file-upload, inside my own component. So I try to add the directives property on the @Component decorator, however, I get an error in VS Code。
@Component({
selector: 'file-upload',
templateUrl: './file-upload.component.html',
styleUrls: ['./file-upload.component.css'],
directives: [ FILE_UPLOAD_DIRECTIVES ]
})
export class FileUploadComponent implements OnInit {
...
}
[ts] '{ 选择器类型的参数：字符串；模板网址：字符串；样式网址：字符串[]；指令：未定义[]； }' 不可分配给 'Component' 类型的参数。
对象字面量只能指定已知属性，并且 'directives' 不存在于类型 'Component' 中。
我的导入如下所示。
import { Component, OnInit, Input } from '@angular/core';
import { NgClass, NgStyle } from '@angular/common';
import { FileSelectDirective, FileDropDirective, FileUploadModule, FileUploader, FileUploaderOptions } from 'ng2-file-upload';
当我 运行 应用程序 ng serve 时，我看到控制台中报告了以下错误。
zone.js:388 未处理的 Promise 拒绝：模板解析错误：
无法绑定到 'uploader'，因为它不是 'div' 的已知 属性。 ("
[ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
(fileOver)="fileOverBase($event)"
[错误 ->][上传者]="uploader"
class="well my-drop-zone">
这是我在 package.json 中的依赖项。
{
"name": "app-www",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@angular/common": "~2.1.1",
"@angular/compiler": "~2.1.1",
"@angular/core": "~2.1.1",
"@angular/forms": "~2.1.1",
"@angular/http": "~2.1.1",
"@angular/platform-browser": "~2.1.1",
"@angular/platform-browser-dynamic": "~2.1.1",
"@angular/router": "~3.1.1",
"angular2-cookie": "^1.2.5",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"jquery": "^3.1.1",
"lodash": "^4.16.6",
"ng2-bootstrap": "^1.1.16",
"ng2-file-upload": "^1.1.2",
"rxjs": "5.0.0-beta.12",
"ts-helpers": "^1.1.1",
"zone.js": "^0.6.25"
},
"devDependencies": {
"@types/jasmine": "^2.2.30",
"@types/lodash": "^4.14.38",
"@types/node": "^6.0.45",
"angular-cli": "1.0.0-beta.19-3",
"codelyzer": "1.0.0-beta.1",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "4.0.9",
"ts-node": "1.2.1",
"tslint": "3.13.0",
"typescript": "~2.0.3",
"webdriver-manager": "10.2.5"
}
}
文档说要使用这个导入语句。
import { FILE_UPLOAD_DIRECTIVES } from 'ng2-file-upload';
但在 VS Code 中，它表示如下。
[ts] 模块“/Users/jwayne/git/app-www/node_modules/ng2-file-upload/ng2-file-upload”'没有导出成员 'FILE_UPLOAD_DIRECTIVES'。
更有趣的是，我创建了自己的登录组件，如下所示。
@Component({
selector: 'login-component',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
...
}
为了在另一个组件中使用它，我什至不必再将它作为指令或类似的东西来引用。例如，我有一个使用此登录组件的默认组件。 HTML 如下所示。
<login-component></login-component>
代码如下所示（注意组件装饰器没有指令 属性）。
@Component({
selector: 'app-default',
templateUrl: './default.component.html',
styleUrls: ['./default.component.css']
})
export class DefaultComponent implements OnInit, OnDestroy {
...
}
虽然现在修改了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 { }
所以，有很多事情要做，但首先，组件装饰器的指令 属性 发生了什么？
文档似乎使用的是 Angular 的旧 RC 版本。与此同时，angular 团队引入了 NgModules 的概念，以更好地构建您的应用程序并避免重复使用的指令。所以你不再声明在 Component 装饰器中使用的指令。有关详细信息，请查看 angular docs on NgModule.
您使用的库也适用于此，但文档可能尚未更改。检查存储库中的 their demo code and this commit 以查看您现在需要如何导入模块并查看 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
}