javascript - 无法在方法中访问指令

Question

在我的应用程序中，我有一个 AdDirective，它看起来像:

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
    selector: '[ad-host]',
})
export class AdDirective {
    constructor(public viewContainerRef: ViewContainerRef) { }
}

我在 main-view.component.ts 中使用的这个指令。

在类定义中，我使用以下代码访问 HTML 模板中的目标:

import { Component, EventEmitter, Input, ViewChild, ComponentFactoryResolver, OnDestroy, AfterViewInit } from '@angular/core';
import { NavigationService } from '../Services/navigation.service';
import { NavigationItem } from '../Model/navigation-item';
import { WelcomeViewComponent } from '../Components/welcome-view.component';
import { AdService } from '../Services/ad.service';
import { AdDirective } from '../Directives/ad.directive';

@Component({
    selector: 'main-view',
    templateUrl: 'main-view.component.html',
    providers: [NavigationService, AdService]

})

export class MainViewComponent implements AfterViewInit {
    @ViewChild(AdDirective) adHost: AdDirective;

    constructor(
        private navigationService: NavigationService,
        private componentFactoryResolver: ComponentFactoryResolver,
        private adService: AdService) {

        navigationService.navigationData.subscribe(this.doNavigate);
    }

    ngAfterViewInit() {
        let adItem = this.adService.getAds().find(i => i.component == WelcomeViewComponent);
        let componentFactory = this.componentFactoryResolver.resolveComponentFactory(adItem.component);
        let viewContainerRef = this.adHost.viewContainerRef;
        viewContainerRef.clear();
        let componentRef = viewContainerRef.createComponent(componentFactory);
    }

    doNavigate(NavigationItem: NavigationItem): void {

    }
}

到目前为止一切正常。

但是如果我尝试在 doNavigate 方法中访问 adHost，我会收到如下错误:

ERROR TypeError: Cannot read property 'adHost' of undefined at webpackJsonp.118.MainViewComponent.doNavigate (main-view.component.ts:35) at SafeSubscriber.schedulerFn [as _next] (core.es5.js:3647) at SafeSubscriber.__tryOrUnsub (Subscriber.js:238) at SafeSubscriber.next (Subscriber.js:185) at Subscriber._next (Subscriber.js:125) at Subscriber.next (Subscriber.js:89) at EventEmitter.Subject.next (Subject.js:55) at EventEmitter.emit (core.es5.js:3621) at NavigationComponent.webpackJsonp.119.NavigationComponent.navigationItemClick (navigation.component.ts:

我做错了什么？为什么我不能从我的方法访问它？

---

更新:我的“main-view.component.html”看起来像:

<div class="row">
    <navigation class="col-3 menu"></navigation>

    <ng-template ad-host class="col-9"></ng-template>
</div>

---

更新 2:

导航方法是从 navigation.component.ts 中调用的。这看起来像:

import { Component, OnInit } from '@angular/core';
import { NavigationItem } from '../Model/navigation-item';
import { PersonViewComponent } from '../Components/person-view.component';
import { PersonService } from '../Services/person.service';
import { NavigationService } from '../Services/navigation.service';
import { WelcomeViewComponent } from './welcome-view.component'

@Component({
    selector: 'navigation',
    templateUrl: './navigation.component.html'
})

export class NavigationComponent implements OnInit {

    constructor(private personService: PersonService,
        private navigationService: NavigationService) {
    }

    ngOnInit(): void {
        this.navigationItems = [
            new NavigationItem(WelcomeViewComponent, 'Welcome'),
            new NavigationItem(PersonViewComponent, 'Persons')
        ]
    }

    navigationItemClick(item: NavigationItem): void {
        this.navigationService.navigationData.emit(item);
    }

    navigationItems: NavigationItem[];
}

Answer 1

你在这里失去了上下文 this

navigationService.navigationData.subscribe(this.doNavigate);

以下应该有效:

navigationService.navigationData.subscribe(() => this.doNavigate());

或

navigationService.navigationData.subscribe(this.doNavigate.bind(this));