html - Angular - 使用服务数组自动创建组件/页面

Question

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

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

简而言之，我必须手动为每个案例创建一个组件，但内容是自动化的。

有没有办法让 Angular 自动为每种情况创建页面/组件，fe 还通过遍历数组？

确切地说，我只想在服务数组中添加另一个条目，以便 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' }
];

标签： htmlangulartypescript