Angular2:使用事件发射器时遇到问题

Question

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

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>

这是我的父组件（设备详细信息组件）的一部分：

@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组件

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