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