Question

我试图制作工具提示指令/组件，但是我尝试的一切，我不能在我的工具提示中使用插值来使用重复的变量。我的主页标记如下：

<md-card class='col-md-3 image-gallery' *ngFor="let advertiser of AdvertiserService.advertisers;let i = index" [@fadeIn]>
    <md-card-content 
    [tooltip]="template" [advertiser]="advertiser">
        //some other markup
    </md-card-content>
</md-card>

我的工具提示指令如下所示：

import { ComponentFactoryResolver, ComponentRef, Directive, ElementRef, 
HostListener, Injector, Output, Input, ReflectiveInjector, Renderer2,     
TemplateRef, Type, ViewContainerRef, ViewRef } from '@angular/core';
import { TooltipComponent } from './tooltip.component';
import { AdvertiserClass } from './../advertiser/advertiser-class';

@Directive({
    selector: '[tooltip]'
})
export class TooltipDirective {
    // We can pass string, template or component
    @Input('tooltip') content: string | TemplateRef<any> | Type<any>;
    @Input('advertiser') advertiser: AdvertiserClass;
    private componentRef: ComponentRef<TooltipComponent>;

    constructor(private element: ElementRef,
        private renderer: Renderer2,
        private injector: Injector,
        private resolver: ComponentFactoryResolver,
        private vcr: ViewContainerRef) {
    }

    @HostListener('mouseenter')
    mouseenter() {
        //console.log(this.advertiser);
        if (this.componentRef) return;
        const factory = 
this.resolver.resolveComponentFactory(TooltipComponent);
        const injector = ReflectiveInjector.resolveAndCreate([
            {
                provide: 'tooltipConfig',
                useValue: {
                    host: this.element.nativeElement
                }
            }
        ]);
        this.componentRef = this.vcr.createComponent(factory, 0, injector, 
this.generateNgContent());
    }

    generateNgContent() {
        if (typeof this.content === 'string') {
            const element = this.renderer.createText(this.content);
            return [[element]];
        }

        if (this.content instanceof TemplateRef) {
            const viewRef = this.content.createEmbeddedView({});
            return [viewRef.rootNodes];
        }

        // Else it's a component
        const factory = this.resolver.resolveComponentFactory(this.content);
        const viewRef = factory.create(this.injector);
        return [[viewRef.location.nativeElement]];
    }

    @HostListener('mouseout')
    mouseout() {
        this.destroy();
    }

    destroy() {
        this.componentRef && this.componentRef.destroy();
        this.componentRef = null;
    }

    ngOnDestroy() {
        this.destroy();
    }
}

我的工具提示组件如下所示：

import { Component, Directive, ElementRef, Inject, OnInit, ViewChild, Input         
} from '@angular/core';
import { AdvertiserClass } from './../advertiser/advertiser-class';

@Directive({
    selector: '.tooltip-container'
})
export class TooltipContainerDirective {
}

@Component({
    template: `
    <div class="tooltip-container" [ngStyle]="{top: top}">
        {{advertiser | json}}
    </div>
  `,
    styles: [
        `
      .tooltip-container {
        background-color: black;
        color: #fff;
        display: inline-block;
        padding: 0.5em;
        position: absolute;
      }
    `
    ]
})
export class TooltipComponent implements OnInit {
    @Input('advertiser') advertiser: AdvertiserClass;
    top: string;
    @ViewChild(TooltipContainerDirective, { read: ElementRef }) private 
tooltipContainer;

    constructor( @Inject('tooltipConfig') private config) {
    }

    ngOnInit() {
        const { top } = this.config.host.getBoundingClientRect();
        const { height } = 
this.tooltipContainer.nativeElement.getBoundingClientRect();
        this.top = `${top - height}px`;
    }
}

我如何在可行的代码中使用{{advertisers}} interpotalion？我已经尝试了这个的每个变体，但我无法将重复的数据传递给工具提示组件模板。

Answer 1

按原样，您的tooltip指令了解广告商，但使用TooltipComponent的数据来生成视图的人却不了解。您需要做的是在指令创建广告商时将广告商从指令传递到TooltipComponent。我可能会在要创建并注入TooltipComponent的'tooltipconfig'对象中执行此操作。

    const injector = ReflectiveInjector.resolveAndCreate([
        {
            provide: 'tooltipConfig',
            useValue: {
                host: this.element.nativeElement,
                advertiser: this.advertiser
            }
        }
    ]);

然后在ToolTipComponent中，可以将该值从构造函数的config对象中拉出，以使其可用于模板

constructor( @Inject('tooltipConfig') private config) {
    this.advertiser = config.advertiser;
}

或者您可以将配置对象在构造函数中公开，并绑定到模板中的{{config.advertiser}}。

Angular 4 - 使用指令属性共享数据

1 个答案: