Angular基于URL调用服务方法的优化方案咨询

Hey there! Let's clean up your code to make it more maintainable and concise. We'll tackle the redundant logic in DataService first, then streamline the route handling in your component.

第一步：重构DataService，消除重复代码 #

Your current service has tons of repeated logic—each method creates two FilterCommon instances, builds an array, and returns an Observable. Let's extract the page-specific data into a config object and use a single generic method to generate the data.

1. Define a type for page configurations #

First, create a type to describe the unique data for each page:

interface PageConfig {
  refcode: Omit<FilterCommon, 'items'> & { items: Array<{ content: string; url: string; footer: string; bottomheading: string }> };
  work: Omit<FilterCommon, 'item'> & { item: Array<{ content: string; url: string; bottomheading: string; footer: string }> };
}

2. Store all page data in a config map #

Move all your page-specific data into a single object—adding new pages only requires adding a new entry here:

@Injectable({ providedIn: 'root' }) 
export class DataService { 
  // Map page names to their unique data configurations
  private pageConfigs: Record<string, PageConfig> = {
    friend: {
      refcode: {
        name: 'Sutitle here',
        heading: 'The title here',
        action: 'Select this template',
        link: '/templats/friend',
        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: '' }
        ]
      },
      work: {
        headingwork: 'How it works',
        class: 'bew-ccc',
        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. ' }
        ]
      }
    },
    giveaway: {
      refcode: {
        name: 'Subtitle',
        heading: 'The Title',
        action: 'Select this template',
        link: '/templats/giveaway',
        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: '' }
        ]
      },
      work: {
        headingwork: 'How it works',
        class: 'v-ine',
        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.' }
        ]
      }
    },
    leaderboard: {
      refcode: {
        name: 'Subtitle here',
        heading: 'The Title',
        action: 'Select this template',
        link: '/templats/leaderboard',
        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: '' }
        ]
      },
      work: {
        headingwork: 'How it works',
        class: 'v-col',
        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.' }
        ]
      }
    },
    // Add other pages like shopify, ecommerce here
  };

  // Generic method to get page data by page name
  getPageData(pageName: string): Observable<FilterCommon[]> {
    const config = this.pageConfigs[pageName.toLowerCase()];
    if (!config) {
      return of([]); // Return empty array or throw error based on your needs
    }

    // Create and populate FilterCommon instances
    const refcode = new FilterCommon();
    Object.assign(refcode, config.refcode);

    const work = new FilterCommon();
    Object.assign(work, config.work);

    return of([refcode, work]); // Use RxJS `of()` instead of manually creating Observable
  }
}

第二步：优化组件的路由逻辑 #

The long chain of if-else statements is hard to maintain. We'll replace it with a URL-to-page-name map and use RxJS operators to clean up the subscription logic (and avoid memory leaks).

@Component({
  // Your component metadata here
})
export class YourComponent implements OnInit, OnDestroy {
  dataRefer: gapshopify[];
  data: friend[];
  private destroy$ = new Subject<void>(); // Manages subscription cleanup

  constructor(private dataService: DataService, private router: Router) {}

  ngOnInit() {
    // Map URLs to their corresponding page names and data targets
    const urlPageMap: Record<string, { pageName: string; target: 'data' | 'dataRefer' }> = {
      '/templates/common/referFriend/getd': { pageName: 'referfriend', target: 'data' },
      '/templates/modules/Friend': { pageName: 'friend', target: 'data' },
      '/templates/modules/ecommercepage': { pageName: 'ecommerce', target: 'data' },
      '/templates/modules/leaderboard': { pageName: 'leaderboard', target: 'data' },
      '/templates/modules/Giveaway': { pageName: 'giveaway', target: 'data' },
      '/templates/modules/Shopify': { pageName: 'shopify', target: 'dataRefer' }
    };

    this.router.events.pipe(
      filter(ev => ev instanceof NavigationEnd),
      map((ev: NavigationEnd) => ev.url),
      switchMap(url => {
        const mapEntry = urlPageMap[url];
        if (!mapEntry) {
          console.log('no url matched');
          return of(null);
        }
        return this.dataService.getPageData(mapEntry.pageName).pipe(
          map(data => ({ data, target: mapEntry.target }))
        );
      }),
      takeUntil(this.destroy$) // Clean up subscription when component is destroyed
    ).subscribe(result => {
      if (result) {
        if (result.target === 'data') {
          this.data = result.data as friend[];
        } else if (result.target === 'dataRefer') {
          this.dataRefer = result.data as gapshopify[];
        }
      }
    });
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

Key improvements: #

• Subscription cleanup: Uses takeUntil to prevent memory leaks when the component is destroyed.
• Maintainability: Adding a new URL only requires adding an entry to the urlPageMap instead of writing new if-else blocks.
• RxJS best practices: Uses pipeable operators for cleaner, more declarative code.

Bonus: Simplify further with route parameters #

If you can adjust your route configuration to include the page name as a parameter (e.g., /templates/modules/:pageName), you can eliminate the URL map entirely:

// Example route config
const routes: Routes = [
  { path: 'templates/modules/:pageName', component: YourComponent }
];

// Component logic
this.route.paramMap.pipe(
  map(params => params.get('pageName')),
  switchMap(pageName => {
    if (!pageName) return of(null);
    return this.dataService.getPageData(pageName).pipe(map(data => ({ data, pageName })));
  }),
  takeUntil(this.destroy$)
).subscribe(({ data, pageName }) => {
  // Assign data to the correct property based on pageName
});

内容的提问来源于stack exchange，提问作者user2572661