基于URL的调用方法

Question

我创建了一个data.service.ts，在这里我创建了一个包含有关页面信息的方法，因为我不想为每个页面创建单独的组件，因为它在整个页面中具有相同的布局。现在，我想展示基于url的那些方法，它可以工作，但我认为这不是任何plz帮助的正确方法。 这是我的代码

我已经在下面创建了此代码，该代码可以按预期运行，但不知道这是一种更正的方法，否则我可以将其简化为更简单的格式 数据服务

@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() {}
  }

我得到了预期的结果，但是需要更正确的方法

Answer 1

您只需在组件中添加@Input（），然后为正在使用该组件的每个页面发送数据，如下所示：

您的组件“ ts”文件应如下所示：

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

，并且对于每个页面，您都需要在“ ts”文件中包含以下代码：

@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;
        });
    }
}

最后，每个页面的角度标签应如下所示：

<app-giveaway [data]="dataRefer"></app-giveaway>

<app-shopify [data]="dataRefer"></app-shopify>

Answer 2

我意识到您的数据服务中的功能是如此相似，并且它们仅在页脚和链接中有区别，因此我将您的dataService缩短为：

@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();
});
}

} 而且我已经将您的ts代码更改为此：

  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() {}
 }

但是它仅用于您在dataservice中使用的3个功能，因此您应该自己完成切换案例。