Hello, I have some problem probably with understanding of components.
I thought, we build components to prevent same pieces of code on multiple pages.
Now, for example I created a component Quote, that should be represented by ion-card.
quote.ts (QuoteModel is only a container class to hold properties of every Quote)
@Component({
selector: 'quote',
templateUrl: 'quote.html'
})
export class QuoteComponent {
@Input('quoteObj') quoteObj :QuoteModel;
quote: QuoteModel;
constructor() {
//console.log('Hello QuoteComponent Component');
}
ngAfterViewInit() {
this.quote = this.quoteObj;
}
}
quote.html
<ion-card color="primDark">
<ion-card-content>
<p class="quote-text ma-centered">{{ quoteObj.text }}</p>
<div class="action-icons ma-centered">
<button ion-button color="primDark"><ion-icon name="share"></ion-icon></button>
<button ion-button color="primDark"><ion-icon name="image"></ion-icon></button>
<button ion-button color="primDark"><ion-icon name="star"></ion-icon></button>
</div>
</ion-card-content>
</ion-card>
I want to use this component on multiple pages. So when I use it for example on ProfilePage and QuotesPage, where should I declare QuoteComponent to prevent errors?
When I add QuoteComponent to declarations only in app.module.ts (in imports I have ProfilePageModule and QuotesPageModule) and use in profile.html, I get this error:
Uncaught Error: Template parse errors:
‘quote’ is not a known element
When I delete this declaration from app.module.ts and add QuoteComponent in profile.module.ts declarations array, it works fine. But when I do the same thing for my second page (add QuoteComponent to quotes.module.ts), it fails with this error:
Uncaught Error: Type QuoteComponent is part of the declarations of 2 modules: ProfilePageModule and QuotesPageModule! Please consider moving QuoteComponent to a higher module that imports ProfilePageModule and QuotesPageModule. You can also create a new NgModule that exports and includes QuoteComponent then import that NgModule in ProfilePageModule and QuotesPageModule.
Is there any clear way to handle this? Thanks in advance