Angular 基于Url的调用方法

我创建了一个

data.service.ts

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

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

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

}

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

您只需在组件中添加一个@Input（），并发送使用此组件的每个页面的数据，如下所示：

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

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

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

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

@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”文件中包含以下代码：

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

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

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

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

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

---

我意识到您的数据服务中的功能非常相似，它们只有页脚和链接不同，因此我将您的数据服务缩短如下：

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

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

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

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

---

但这只是针对您在dataservice中使用的3个功能，因此您应该自己完成交换机案例。

将路由器代码和一部分数据服务代码发布为well@MichaelB我添加了数据服务代码，我添加了一个新的答案，请检查它。嗨，Mohammadreza，谢谢你的回复，但我不想单独使用html和选择器对于同一个html模板，而不是多个模板，我已经尝试过这种方法，它可以工作，但如果可以在单个模板中轻松完成，我不想创建那么多文件