1
resposta

Diretivas não funcionam

Realizei todas as atividade conforme o Flávio orientou nos vídeos, porém, notei que as Diretivas não funcionam como deveria, por exemplo a diretiva photoOwnerOnly , se utilizo a diretiva como no código:

<i 
    photoOwnerOnly 
    [ownedPhoto]="photo" 
    (click)="removePhoto()" 
    class="fa fa-trash-o fa-2x pull-right">
</i>

Ela não funciona, porém se utilizo dessa forma:

<i 
    *photoOwnerOnly 
    [ownedPhoto]="photo" 
    (click)="removePhoto()" 
    class="fa fa-trash-o fa-2x pull-right">
</i>

O seguinte erro aparece no navegador:

ERROR TypeError: this.element.nativeElement is not a function

E este no Angular/CLI:

ERROR in src/app/photos/photo-details/photo-details.component.html:18:24 - error NG8002: Can't bind to 'ownedPhoto' since it isn't a known property of 'i'.

    18                        [ownedPhoto]="photo"
                              ~~~~~~~~~~~~~~~~~~~~

      src/app/photos/photo-details/photo-details.component.ts:11:18
        11     templateUrl: './photo-details.component.html'
                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component PhotoDetailsComponent.

Porém:

import { Directive, Input, OnInit, ElementRef, Renderer2 } from '@angular/core';

import { Photo } from '../../photo/photo';
import { UserService } from 'src/app/core/user/user.service';

@Directive({
    selector: '[photoOwnerOnly]'
})
export class PhotoOwnerOnlyDirective implements OnInit {

    @Input() ownedPhoto: Photo;

    constructor(
        private element: ElementRef<any>,
        private render: Renderer2,
        private userService: UserService
    ) { }

    ngOnInit(): void {
        this.userService.getUser()
            .subscribe(user => {
                if (!user || user.id != this.ownedPhoto.userId) {
                    this.render.setStyle(this.element.nativeElement(), 'display', 'none')
                };
            });
    }
}

No VSCode não apresenta erros...

Estou usando o Angular 9, TypeScript 3.8.3, VSCode 1.44.2

1 resposta

Fala ai Leandro, tudo bem? Isso pode ser por conta das versões do Angular e TypeScript, isso porque no curso é usado o Angular 6 e TypeScript 2.7.

Sugiro tentar utilizar as mesmas versões para dar andamento no curso.

Espero ter ajudado.