angular - 类型错误 : Invalid Event Target - But just by using direct Route

Question

应用程序实现了以下组件

customer-overview.component.ts

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core'
import { Router } from '@angular/router'
import { DataSource } from '@angular/cdk'

import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/observable/fromEvent';

import { CustomerOverviewService, CustomerOverviewDataSource } from './../../services/customer-overview.service'

@Component({
    selector: 'customer-overview-component',
    templateUrl: 'customer-overview.component.html',
    styleUrls: ['./customer-overview.component.css'],

    providers: [CustomerOverviewService]
})
export class CustomerOverviewComponent implements OnInit {
    private _dataService: CustomerOverviewService;
    public dataSource: CustomerOverviewDataSource | null;

    @ViewChild('filter') filter: ElementRef;

    constructor(private dataService: CustomerOverviewService, private router: Router) {
        this._dataService = dataService;
        this.dataSource = new CustomerOverviewDataSource(this._dataService);
    }

    ngOnInit() {
        Observable.fromEvent(this.filter.nativeElement, 'keyup')
                .debounceTime(150)
                .distinctUntilChanged()
                .subscribe(() => {
                    if (!this.dataSource) { return; }
                    this.dataSource.filter = this.filter.nativeElement.value;
                });
    }
}

路由本身定义如下

app.module.client.ts

    const appRoutes: Routes = [
        {
            path: '',
            component: HomeComponent
        }
        {
            path: 'customer',
            component: CustomerOverviewComponent
        }
    ]


    @NgModule({
        bootstrap: sharedConfig.bootstrap,
        declarations: sharedConfig.declarations,
        imports: [
        RouterModule.forRoot(
                appRoutes,
                { enableTracing: true }),
            BrowserModule,
            FormsModule,
            HttpModule,
            BrowserAnimationsModule,
            SharedModule,

        ],
        providers: [
            CustomerOverviewService,
            ...sharedConfig.providers,
            { provide: 'ORIGIN_URL', useValue: location.origin }
        ]
    })

该组件工作正常，通过控制台没有任何错误，也没有通过网络协议(protocol)获得 500。但是当我使用到 localhost/customer 的直接链接时，出现以下错误。

处理请求时发生未处理的异常。

Exception: Call to Node module failed with error: Error: Uncaught (in promise): TypeError: Invalid event target TypeError: Invalid event target at Function.FromEventObservable.setupSubscription

我尝试在 NgAfterViewInit 和构造函数中使用 Observable.FromEvent，但这都没有帮助。我在这里缺少什么？

Answer 1

请将您的订阅移至 ngAfterVewInit Hook 。

事实是 @ViewChild('filter') filter: ElementRef; 在 ngAfterVewInit 之前但在 ngOnInit 之后初始化。因此，您将未定义的值赋给 fromEvent 运算符。

ngAfterViewInit() {
    console.log(this.searchField);
    Observable.fromEvent(this.searchField.nativeElement, 'input').
    map((e: any) => e.target.value).
    filter(text => text.length > 2).
    debounceTime(1000).
    distinctUntilChanged().subscribe(res => console.log(res));
}

工作正常。