角度-使用服务数组自动创建组件/页面

Question

我目前正在尝试为自己的网络应用创建一种自动化。

我有一个数组服务。我希望每个条目都有自己的页面-到目前为止，我已经创建了一个模板，在每种情况下我都在单个组件中使用了模板（因此，我有8个组件）-通过迭代到分配的条目来填充每个组件的模板（我只需要更改每个案例组件的索引）。这些组件可以通过路由到达。

总而言之，我必须为每种情况手动创建一个组件，但是内容是自动化的。

是否可以让Angular为每种情况自动创建页面/组件，例如还要遍历数组吗？

确切地说，我只需要向Angular服务数组添加另一个条目即可为案例创建单个页面？有没有办法实现这种行为？

服务：

export const CASES: Case[] = [
  { name: 'Diesel',
    portfolioImage: '/assets/images/portfolio/diesel.png',
    image: '/assets/images/diesel.jpg',
    image2: '/assets/images/diesel/diesel-sunflower.png',
    image3: '/assets/images/diesel/diesel-cap.png', link: '/cases/diesel' },

  { name: 'WeWork Berlin',
    portfolioImage: '/assets/images/portfolio/berlin.png',
    image: '/assets/images/berlin.jpg',
    image2: '/assets/images/wework/berlin-logo.png',
    image3: '/assets/images/wework/berlin-building.png',
    link: '/cases/wework' },

  { name: 'Fritzhansen',
    portfolioImage: '/assets/images/portfolio/fritzhansen.png',
    image: '/assets/images/fritzhansen.jpg',
    image2: '/assets/images/fritzhansen/women.png',
    image3: '/assets/images/fritzhansen/chairs.jpeg',
    link: '/cases/fritzhansen' },

  { name: 'Savum',
    portfolioImage: '/assets/images/portfolio/savum.png',
    image: '/assets/images/savum/savum-front.png',
    image2: '/assets/images/savum/savum-logo.png',
    image3: '/assets/images/savum/savum-iphone.png',
    link: '/cases/savum' },

  { name: 'Eskay',
    portfolioImage: '/assets/images/portfolio/eskay.png',
    image: '/assets/images/eskay.jpg',
    image2: '/assets/images/eskay/front.jpg',
    image3: '/assets/images/eskay/inner.jpg',
    link: '/cases/eskay' },

  { name: 'Diesel Fashion',
    portfolioImage: '/assets/images/portfolio/diesel-snd.png',
    image: '/assets/images/diesel-snd.png',
    image2: '/assets/images/diesel/diesel-sunflower.png',
    image3: '/assets/images/diesel/diesel-cap.png',
    link: '/cases/diesel' },

  { name: 'Mobilia',
    portfolioImage: '/assets/images/portfolio/mobilia.png',
    image: '/assets/images/mobilia.jpg',
    image2: '/assets/images/mobilia/green.jpg',
    image3: '/assets/images/mobilia/pink.jpg',
    link: '/cases/mobilia' },

  { name: 'Rarekind',
    portfolioImage: '/assets/images/portfolio/rarekind.png',
    image: '/assets/images/rarekind.jpg',
    image2: '/assets/images/rarekind/tube.png',
    image3: '/assets/images/rarekind/red.png',
    link: '/cases/rarekind' }
];