基于Url的调用方法

Question

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

我已经在下面创建了这段代码，它按预期工作，但不知道这是正确的方法，还是我可以将其简化为更简单的格式数据服务



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

最后每个页面的 angular 标签应该是这样的：

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

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

Answer 2

我意识到你们的数据服务中的功能非常相似，它们只在页脚和 link 上有所不同，所以我像这样缩短了你们的数据服务：

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

但它只是针对您在数据服务中使用的 3 个函数，因此您应该自己完成 switch case。

基于Url的调用方法

Call method based on Url

angular

angular-ui-router