Question posted in 
I created a data.service.ts where I have created a method that has information regarding pages Because I don’t want to create a separate component for each page as it has the same layout throughout the page. Now I wanted to show those methods based on url and it’s working but I don’t think it’s the correct way to do that anyone plz help.
Here is my code
I have already created this code below which is working as expcted but don’t know it’s a corrected way or I can reduce it to much simpler format
Dataservice
@Injectable({
providedIn: 'root'
})
export class DataService {
friend(): Observable<FilterCommon[]>{
return new Observable<FilterCommon[]>(observer => {
const refcode: FilterCommon = new FilterCommon();
refcode.name = 'Sutitle here';
refcode.heading = 'The title here';
refcode.action = 'Select this template',
refcode.link = '/templats/friend',
refcode.items = [
{
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non tellus eu nulla fringilla fermentum et non ligula. ',
url: 'assets/images/dashboard-gallery/1.jpg',
footer: '',
bottomheading: ''
}
];
const work: FilterCommon = new FilterCommon();
work.headingwork = 'How it works';
work.class = 'bew-ccc';
work.item = [
{
content: '1',
url: 'assets/images/1.png',
bottomheading: 'You install the widget',
footer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non tellus eu nulla fringilla fermentum et non ligula. '
},
{
content: '2',
url: 'assets/images/2.png',
bottomheading: 'The refer friends',
footer: 'Lorem ipsum dolor sit amet.'
},
{
content: '3',
url: 'assets/images/3.png',
bottomheading: 'Everyone gets coupon rewards ',
footer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. '
}
];
const friendallpage: FilterCommon[] = [];
friendallpage.push(refcode);
friendallpage.push(work);
observer.next(friendallpage);
observer.complete();
});
}
Giveaway(): Observable<FilterCommon[]>{
return new Observable<FilterCommon[]>(observer => {
const refcode: FilterCommon = new FilterCommon();
refcode.name = 'Subtitle';
refcode.heading = 'The Title';
refcode.action = 'Select this template',
refcode.link = '/templats/giveaway',
refcode.items = [
{
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non tellus eu nulla fringilla fermentum et non ligula. ',
url: 'assets/images/dashboard-gallery/1.jpg',
footer: '',
bottomheading: ''
}
];
const work: FilterCommon = new FilterCommon();
work.headingwork = 'How it works';
work.class = 'v-ine';
work.item = [
{
content: '1',
url: 'assets/images/1.png',
bottomheading: 'You install the widget',
footer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. '
},
{
content: '2',
url: 'assets/images/2.png',
bottomheading: 'The refer friends',
footer: 'this is your moment of glory.'
},
{
content: '3',
url: 'assets/images/3.png',
bottomheading: 'Everyone gets coupon rewards ',
footer: ' if you get lost.'
}
];
const friendallpage: FilterCommon[] = [];
friendallpage.push(refcode);
friendallpage.push(work);
observer.next(friendallpage);
observer.complete();
});
}
leaderboard(): Observable<FilterCommon[]>{
return new Observable<FilterCommon[]>(observer => {
const refcode: FilterCommon = new FilterCommon();
refcode.name = 'Subtitle here';
refcode.heading = 'The Title';
refcode.action = 'Select this template',
refcode.link = '/templats/leaderboard',
refcode.items = [
{
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non tellus eu nulla fringilla fermentum et non ligula. ',
url: 'assets/images/dashboard-gallery/1.jpg',
footer: '',
bottomheading: ''
}
];
const work: FilterCommon = new FilterCommon();
work.headingwork = 'How it works';
work.class = 'v-col';
work.item = [
{
content: '1',
url: 'assets/images/1.png',
bottomheading: 'You install the widget',
footer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. '
},
{
content: '2',
url: 'assets/images/2.png',
bottomheading: 'The friends',
footer: 'this is your moment of glory.'
},
{
content: '3',
url: 'assets/images/3.png',
bottomheading: 'Everyone gets',
footer: 'tif you get lost.'
}
];
const friendallpage: FilterCommon[] = [];
friendallpage.push(refcode);
friendallpage.push(work);
observer.next(friendallpage);
observer.complete();
});
}
}
constructor(private dataService: DataService, private router: Router, private route: ActivatedRoute) {
this.router.events.subscribe((ev) => {
if (ev instanceof NavigationEnd) {
console.log(ev.url);
if(ev.url == '/templates/common/referFriend/getd'){
this.dataService.referfriend().subscribe(data => {
this.data = data;
});
} else if(ev.url == '/templates/modules/Friend'){
this.dataService.friend().subscribe(data => {
this.data = data;
});
} else if(ev.url == '/templates/modules/ecommercepage'){
this.dataService.ecommerce().subscribe(data => {
this.data = data;
});
} else if(ev.url == '/templates/modules/leaderboard'){
this.dataService.leaderboard().subscribe(data => {
this.data = data;
});
} else if(ev.url == '/templates/modules/Giveaway'){
this.dataService.Giveaway().subscribe(data => {
this.data = data;
});
} else if(ev.url == '/templates/modules/Shopify'){
this.dataService.shopify().subscribe(data => {
this.dataRefer = data;
});
} else{
console.log('no url matched');
}
}
});
}
dataRefer: gapshopify[];
data: friend[];
ngOnInit() {}
}
I got the expected result but need the more correct way
2
Answers
you can just add an @Input() in your component and send the data for each page that you are using this component like below :
your component “ts” file should be like this:
and for each page you need to have this code in “ts” file:
and finally the angular tag for each page should be like this:
I realized that your functions are so similar in your data service and they have differences only in the footer and link so I have shorted your dataService like this:
}
and also I have changed your ts code to this :
but it’s just for the 3 functions you used in dataservice so you should complete the switch case on your own.