Angular2：使用EventEmitter时遇到麻烦

Question

我有一个子组件，它是几个设备的列表，它的父组件显示了所选设备的详细信息。 我想处理一个EventEmitter，以便能够在需要时更改我选择的设备，但是我得到了一个

Unexpected directive value 'undefined' on the View of component 'ListOfDevicesComponent'

控制台中的整个日志显示：

EXCEPTION: Unexpected directive value 'undefined' on the View of component 'ListOfDevicesComponent'
angular2.dev.js:23083 EXCEPTION: Unexpected directive value 'undefined' on the View of component 'ListOfDevicesComponent'BrowserDomAdapter.logError @ angular2.dev.js:23083BrowserDomAdapter.logGroup @ angular2.dev.js:23094ExceptionHandler.call @ angular2.dev.js:1185(anonymous function) @ angular2.dev.js:12591NgZone._notifyOnError @ angular2.dev.js:13515collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:13419Zone.run @ angular2-polyfills.js:1247(anonymous function) @ angular2.dev.js:13438zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:468lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:480lib$es6$promise$$internal$$publish @ angular2-polyfills.js:451(anonymous function) @ angular2-polyfills.js:123microtask @ angular2.dev.js:13470Zone.run @ angular2-polyfills.js:1243(anonymous function) @ angular2.dev.js:13438zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$asap$$flush @ angular2-polyfills.js:262
angular2.dev.js:23083 STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:23083ExceptionHandler.call @ angular2.dev.js:1187(anonymous function) @ angular2.dev.js:12591NgZone._notifyOnError @ angular2.dev.js:13515collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:13419Zone.run @ angular2-polyfills.js:1247(anonymous function) @ angular2.dev.js:13438zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:468lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:480lib$es6$promise$$internal$$publish @ angular2-polyfills.js:451(anonymous function) @ angular2-polyfills.js:123microtask @ angular2.dev.js:13470Zone.run @ angular2-polyfills.js:1243(anonymous function) @ angular2.dev.js:13438zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$asap$$flush @ angular2-polyfills.js:262
angular2.dev.js:23083 Error: Unexpected directive value 'undefined' on the View of component 'ListOfDevicesComponent'
    at new BaseException (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:7351:21)
    at RuntimeMetadataResolver.getViewDirectivesMetadata (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:22367:17)
    at TemplateCompiler._compileNestedComponentRuntime (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:24329:63)
    at http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:24314:26
    at Array.forEach (native)
    at http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:24313:37
    at Zone.run (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:1243:24)
    at Zone.run (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:13438:32)
    at zoneBoundFn (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:1220:26)
    at lib$es6$promise$$internal$$tryCatch (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:468:17)

-----async gap-----
Error
    at _getStacktraceWithUncaughtError (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:2236:29)
    at Zone.fork (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:2285:47)
    at Zone.bind (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:1218:53)
    at bindArguments (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:1401:36)
    at lib$es6$promise$promise$$Promise.obj.(anonymous function) [as then] (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:1413:46)
    at TemplateCompiler._compileComponentRuntime (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:24307:14)
    at TemplateCompiler._compileNestedComponentRuntime (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:24333:12)
    at http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:24314:26
    at Array.forEach (native)
    at http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:24313:37

我已经注释了我的一些代码行，以便了解问题的出处，并且看来这是我的子组件中的那行引起的：

private selectDevice: EventEmitter<Device> = new EventEmitter();

当我删除此行时，不再显示错误消息！

如果您想看一看，我为您提供了代码的所有与我的问题有关的部分。

这是我的子组件（ListOfDevicesComponent）的一部分：

@Component({
    // Other properties...
    inputs: ['selectedDevice'],
    outputs: ['selectDevice'],
    directives: [
    DeviceOverviewComponent,
    ROUTER_DIRECTIVES]
})

export class ListOfDevicesComponent {
    private devices = this._devicesServices.getDevices();
    private selectedDevice: Device;
    private selectDevice: EventEmitter<Device> = new EventEmitter();

    constructor(private _devicesServices: DevicesServices) {}

    onSelect(device: Device) {
        this.selectDevice.next(device);
    }
}

及其模板的一部分：

<tbody>
    <tr *ngFor="#device of devices" [class.active]="device === selectedDevice" (click)="onSelect(device)">
        <device-overview [currentDevice]="device" ></device-overview>
    </tr>
</tbody>

这是我的父组件（DeviceDetailsComponent）的一部分：

@Component({
    // Other properties...
    directives: [
        ListOfDevicesComponent,
        ROUTER_DIRECTIVES]
})

export class DeviceDetailsComponent {
    private devices = this._devicesServices.getDevices();
    private selectedDevice: Device;

    constructor(private _devicesServices: DevicesServices) {}

    handleSelectDevice(device) {
        this.selectedDevice = device;
    }

}

我以这种方式整合了它的孩子：

<list-of-devices [selectedDevice]="device" (selectDevice)="handleSelectDevice($event)"></list-of-devices>

谢谢您的帮助！

Answer 1

看起来这是directives:缺少的device-overview组件directives: parameter

@Component({
    // Other properties...
    inputs: ['selectedDevice'],
    outputs: ['selectDevice'],
    directives: [DeviceOverview], // <==
})

export class ListOfDevicesComponent {