Can't access Directive in method

Question

In my application I have a AdDirective which looks like:

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

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

This directive I'm using in my main-view.component.ts.

In the class-definition I'm using the following code to access the target in the HTML-Template:

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 {

    }
}

Until now everything just works fine.

But if I try to access the adHost in the doNavigate-method I get an Error which looks like:

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:

What am I doing wrong? Why can't I access it from my method?

update: My 'main-view.component.html' looks like:

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

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

update 2:

The navigate-method is called from the navigation.component.ts. This looks like:

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[];
}

Where do you use (apply) the directive? Are directive and component where it's used in the same NgModule? — Günter Zöchbauer
I've updated my question with the html-markup. Yes, they are in the same NgModule — Tomtom

yurzui yurzui · Accepted Answer · 2017-11-03T14:29:31

You're loosing context this here

navigationService.navigationData.subscribe(this.doNavigate);

The following should work:

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

or

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

Can't access Directive in method

1 Answers