Применить директиву атрибута для компонента в Angular 4

Я создал компонент img-pop, который имеет @Input() bind property 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= <- token ->

но это бросает Can't bind to 'src' since it isn't a known property of 'img-pop'. ошибка

ссылка plnkr

Пожалуйста, поправьте меня, если я ошибаюсь с концептуальным.

Спасибо.

Источник

2 ответа

Решение

Согласно этому ответу основного участника невозможно установить прямые свойства компонента, используя @HostBinding, @HostBinding всегда привязывается напрямую к DOM. Так что это по замыслу. Вот объяснение:

Это работает как задумано, как:

  • использование привязки данных для связи между директивами / компонентами на одном и том же элементе медленнее, чем прямая связь, когда один вводит другие данные
  • связывание между директивами легко приводит к циклам.

Итак, в вашем случае это возможное решение:

export class AuthSrcDirective {
    // inject host component
    constructor(private c: ImgPopOverComponent ) {    }

    @Input()
    set authSrc(src) {
        // write the property directly
        this.c.src = src + "?access_token=<-token->";
    }
}

Для более общего подхода, посмотрите это.

Источник

Директивы создаются только для селекторов, которые соответствуют HTML, который статически добавляется в шаблоны компонентов.
Нет способа добавлять / удалять директивы из элемента динамически. Единственный способ - добавить / удалить весь элемент (например, используя *ngIf

Источник
Другие вопросы по тегам