小编Nav*_*raj的帖子

我创建了img-pop组件,它具有@Input()绑定属性src.我创建了authSrc指令,它具有@HostBinding()属性src.

@Component({
selector: 'img-pop',

template: `<img [src]="src"/>
            <div *ngIf="isShow">
                 <----extra value----->
            </div>`
})

export class ImgPopOverComponent implements OnInit {

@Input()
private src;

private isShow=false;

@HostListener('mouseenter') onMouseEnter() {
    this.isShow= true;
}

@HostListener('mouseleave') onMouseLeave() {
    this.isShow= false;
}

}

我有这样的指示.

@Directive({ selector: '[authSrc]' })
export class AuthSrcDirective implements OnInit {

@HostBinding()
private src: string;

constructor(private element: ElementRef) { }

ngOnInit() { }

  @Input()
  set authSrc(src) {
   this.src = src+"?access_token=<-token->";
  }
}

我希望将两种功能结合在一起.

<img-pop [authSrc]="/api/url/to/image"></img-pop>

所以最终的url调用将是/ api/url/to/image？access_token = < …