Question

在我的应用程序中，我有AdDirective，如下所示：

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

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

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

在类定义中，我使用以下代码访问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 {

    }
}

到目前为止一切正常。

但是如果我尝试在doNavigate方法中访问adHost，我会得到一个错误，如下所示：

错误TypeError：无法读取未定义的属性“adHost” at 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调用navigate-method。这看起来像：

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));

无法访问方法中的指令

1 个答案: