Angular 2的组件装饰器中的伪指令属性发生了什么? [英] What happened to the directives property in the Component decorator for Angular 2?

问题描述

我正在使用 Angular CLI v1.0.0-beta.19-3 进行构建/建立一个Angular 2网站.我按ng g component file-upload的方式生成组件.

I am using the Angular CLI v1.0.0-beta.19-3 to scaffold/build an Angular 2 website. I generate my component as follows ng g component file-upload.

我注意到生成的组件file-upload.component.ts如下所示.

I noticed that the generated component file-upload.component.ts looks like the following.

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

我需要使用此组件 ng2-file-up ，在我自己的组件中.因此，我尝试在@Component装饰器上添加directives属性，但是，我在 VS Code .

I need to use this component, 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] Argument of type '{ selector: string; templateUrl: string; styleUrls: string[]; directives: undefined[]; }' is not assignable to parameter of type 'Component'.
       Object literal may only specify known properties, and 'directives' does not exist in type 'Component'.

我的导入内容如下所示.

And my imports look like the following.

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时，我在控制台中看到以下错误报告.

When I run the app ng serve, I see the following error reported in the console.

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">

这是我在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"
  }
}

医生说要使用此导入语句.

The doc says to use this import statement.

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

但是在VS Code中，它表示以下内容.

But in VS Code, it says the following.

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

更有趣的是，我创建了自己的登录组件，如下所示.

What's even more interesting, is that I created my own login component like the following.

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

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

In order to use this in another component, I don't even have to reference it as a directive or anything like that anymore. For example, I have a default component that uses this login component. The HTML looks like the following.

<login-component></login-component>

代码如下所示(请注意，组件装饰器没有指令属性).

And the code looks like the following (note no directive property for the component decorator).

@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 { }

因此，发生了很多事情，但是首先，组件装饰器的指令属性发生了什么?

So, there's a lot of stuff going on, but to start off, what happened to the directives property for the component decorator?

推荐答案

解决此问题的关键是在app.module.ts中导入指令，然后使用@NgModule声明它们.这是app.module.ts的代码段.

The key to solving this problem was importing the directives in app.module.ts and then declaring them with @NgModule. Here's a snippet of 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 { }

在我的组件中，我仍然必须导入指令.这是另一个片段.

In my component, I still had to import the directives. Here's another snippet.

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 2的组件装饰器中的伪指令属性发生了什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！