0

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

Improve this question
3
  • Post the router code and a bit of the data service code as well Commented Jun 9, 2019 at 10:23
  • @MichaelB i added dataservice code too Commented Jun 9, 2019 at 12:49
  • I have added a new answer plz check it. Commented Jun 9, 2019 at 13:39

2 Answers 2

Reset to default
1

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:

@Injectable({ providedIn: 'root' }) export class DataService { friendFooters=[ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non tellus eu nulla fringilla fermentum et non ligula. ', 'Lorem ipsum dolor sit amet.', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ' ] giveawayFooters=[ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ', 'this is your moment of glory.', ' if you get lost.' ] leaderboardFooters=[ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ', 'this is your moment of glory.', 'tif you get lost.' ] getData(url): Observable<FilterCommon[]>{ let selectedFooter=[]; let link=''; switch(url){ case '/templates/modules/Friend':{ selectedFooter=this.friendFooters; link='/templats/friend'; break } case '/templates/modules/Giveaway':{ selectedFooter=this.giveawayFooters; link='/templats/giveaway'; break } case '/templates/modules/leaderboard':{ selectedFooter=this.leaderboardFooters; link='/templats/leaderboard'; break } } 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 = link, 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: selectedFooter[0] }, { content: '2', url: 'assets/images/2.png', bottomheading: 'The refer friends', footer: selectedFooter[1] }, { content: '3', url: 'assets/images/3.png', bottomheading: 'Everyone gets coupon rewards ', footer: selectedFooter[2] } ]; const datapage: FilterCommon[] = []; datapage.push(refcode); datapage.push(work); observer.next(datapage); observer.complete(); }); }

} and also I have changed your ts code to this :

 constructor(private dataService: DataService, private router: Router, private route: ActivatedRoute) { this.router.events.subscribe((ev) => { if (ev instanceof NavigationEnd) { console.log(ev.url); this.dataService.getData(ev.url).subscribe(data => { this.data = data; }); } }); } dataRefer: gapshopify[]; data: friend[]; ngOnInit() {} }

but it's just for the 3 functions you used in dataservice so you should complete the switch case on your own.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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:

@Component({ selector: 'app-main-page', templateUrl: './main-page.component.html', styleUrls: ['./main-page.component.scss'] }) export class MainPageComponent { @Input() data:any; constructor() { } }

and for each page you need to have this code in "ts" file:

@Component({ selector: 'app-shopify', templateUrl: './shopify.component.html', styleUrls: ['./shopify.component.scss'] }) export class ShopifyComponent { dataRefer:any; constructor(public dataService : DataService) { this.getData(); } getData(){ this.dataService.shopify().subscribe(data => { this.dataRefer = data; }); } } @Component({ selector: 'app-giveaway', templateUrl: './giveaway.component.html', styleUrls: ['./giveaway.component.scss'] }) export class GiveawayComponent { dataRefer:any; constructor(public dataService : DataService) { this.getData(); } getData(){ this.dataService.giveaway().subscribe(data => { this.dataRefer = data; }); } }

and finally the angular tag for each page should be like this:

<app-giveaway [data]="dataRefer"></app-giveaway> <app-shopify [data]="dataRefer"></app-shopify>
Improve this answer

1 Comment

Hi Mohammadreza thanks for the response but I don't want separate html and selector it goes to same html template not multiple, this approach I already tried and it's working but don't want to create that much files if it can be done easily in single template

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.