无法在方法中访问指令

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-method 中访问 adHost，我会收到如下所示的错误：

错误类型错误：无法读取未定义的属性“adHost” 在 webpackJsonp.118.MainViewComponent.doNavigate (main-view.component.ts:35) 在 SafeSubscriber.schedulerFn [as _next] (core.es5.js:3647) 在 SafeSubscriber.__tryOrUnsub (Subscriber.js:238) 在 SafeSubscriber.next (Subscriber.js:185) 在 Subscriber._next (Subscriber.js:125) 在 Subscriber.next (Subscriber.js:89) 在 EventEmitter.Subject.next (Subject.js:55) 在 EventEmitter.emit (core.es5.js:3621) 在 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));