Estou tendo um erro que ainda não consegui resolver:
Uncaught Error: Template parse errors:
Can't bind to 'photoId' since it isn't a known property of 'ap-photo-comments'.
1. If 'ap-photo-comments' is an Angular component and it has 'photoId' input, then verify that it is part of this module.
2. If 'ap-photo-comments' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
</small>
<ap-photo-comments [ERROR ->][photoId]="photoId"></ap-photo-comments>
<div class="mt-4">
<form>
"): ng:///PhotoDetailsModule/PhotoDetailsComponent.html@12:27
at syntaxError (compiler.js:1021)
at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14830)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:24018)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:24005)
at compiler.js:23948
at Set.forEach (<anonymous>)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:23948)
at compiler.js:23858
at Object.then (compiler.js:1012)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:23857)
Ele não está aceitando o [photoId]="photoId"
de <ap-photo-comments [photoId]="photoId"></ap-photo-comments>
Segue o código para vossa inspeção:
<div class="bg-white border" *ngIf="(photo$ | async) as photo">
<div class="row">
<div class="col-lg-8">
<ap-photo [url]="photo.url" [description]="photo.description"></ap-photo>
</div>
<div class="col-lg-4 p-4">
<small>
<p class="text-left break-word">{{photo?.description}}</p>
<hr>
</small>
<ap-photo-comments [photoId]="photoId"></ap-photo-comments>
<div class="mt-4">
<form>
<div class="input-group">
<textarea class="form-control"></textarea>
<div class="input-group-append">
<button class="btn btn-primary pull-left">Publish</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
import { NgModule } from '@angular/core';
import { PhotoDetailsComponent } from './photo-details.component';
import { CommonModule } from '@angular/common';
import { PhotoModule } from '../photo/photo.module';
import { PhotoCommentsComponent } from './photo-comments/photo-comments.component';
import { RouterModule } from '@angular/router';
@NgModule({
declarations: [ PhotoDetailsComponent, PhotoCommentsComponent ],
exports: [ PhotoDetailsComponent, PhotoCommentsComponent ],
imports: [CommonModule, PhotoModule, RouterModule]
})
export class PhotoDetailsModule {}
import { Component, Input, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { PhotoService } from '../../photo/photo.service';
import { PhotoComment } from "../../photo/photo-comment";
@Component({
selector: 'ap-photo-comments',
templateUrl: './photo-comments.component.html'
})
export class PhotoCommentsComponent implements OnInit {
@Input() photoId: number;
comments$: Observable<PhotoComment[]>;
constructor(private photoService: PhotoService) {}
ngOnInit(): void {
this.comments$ = this.photoService.getComments(this.photoId);
}
}
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { PhotoService } from '../photo/photo.service';
import { Photo } from '../photo/photo';
import { Observable } from 'rxjs';
@Component({
templateUrl: './photo-details.component.html',
styleUrls: [ 'photo-details.css' ]
})
export class PhotoDetailsComponent implements OnInit {
photo$: Observable<Photo>;
photoId: number;
constructor(private route: ActivatedRoute, private photoService: PhotoService) {}
ngOnInit(): void {
this.photoId = this.route.snapshot.params.photoId;
this.photo$ = this.photoService.findById(this.photoId);
}
}