来自共同来源的 Angular 条件组件

Question

首先，我想说我不是 Angular 开发人员，我几乎所有的技能都属于后端工作，但我正在努力解决这个概念，但我什至不知道它是否可行可能的。谷歌搜索没有多大帮助，因为我什至不知道如何正确地表达这个问题，所以我希望描述一下情况，我想做什么，我希望它如何工作，并希望得到一些关于我正在尝试做的事情的建议实际上在 Angular 世界中被称为，无论它是否可能，并假设它是可能的，它看起来像一个例子。

我们有一个 SPA，它有一个 .NET Core Web API 后端。有一个 API 端点 /api/feedItems，它返回一个“提要项”列表，大致相当于事件日志。

提要项的基本形状类似于:

export enum FeedItemType {
    undefined = "undefined",
    foo = "foo",
    bar = "bar"
}

export class FeedItemModel {
    id: number;
    createdUtcTimestamp: Date;
    feedType: FeedItemType;
    feedData: {} // object? any?
}

这里的想法是，所有提要项都将具有特定的元数据，包括 ID、时间戳、提要类型标识符和有效负载。实际负载内容将根据 FeedItemType 而有所不同。

从 API 调用返回的示例提要项目列表可能类似于以下内容:

[  
    {  
    "id":12345,
    "createdUtcTimestamp":"2018-12-05T13:30:00Z",
    "feedType":"foo",
    "feedData":{  
        "name":"this is a foo type feed",
        "description":"This foo feed is describing an event of type 'foo'"
    }
    },
    {  
    "id":67890,
    "createdUtcTimestamp":"2018-12-06T15:45:00Z",
    "feedType":"bar",
    "feedData":{  
        "value1":11111,
        "value2":22222,
        "value3":33333
    }
    }
]

我们实际上有很多不同的提要项目类型，每一种都应该有自己的自定义呈现，以最有用的方式可视化数据。

我想要做的是拥有一个 Angular 组件，负责从 API 获取提要项列表并循环遍历提要项。对于每个提要项目(可能在 *ngFor 指令中)，它应该呈现公共(public)属性，然后根据 feedType 呈现不同的“子”组件。

在这种情况下，假设我的容器组件如下所示:

<div class="feed-item-container" *ngFor="let feedItem of feedItemList; let i = index;">
    <div class="feed-item">
        <div class="timestamp-display">{{feedItem.createdUtcTimestamp}}</div>

        <!-- equivalent of "if feedItem.feedType == 'foo'", 
        possibly ngIf or ngSwitch, but I'd prefer to not 
        have to explicitly check for each type -->
        <feed-item-foo (I have no idea how to pass the feedData to this component) />

        <!-- equivalent of "if feedItem.feedType == 'bar'" -->
        <feed-item-bar (again, this is a mystery what should go here) />

        <!-- equivalent of "if can't match on feedType" -->
        <feed-item-generic (something) />
    </div>
</div>

这里的想法是，我可以根据需要在该文件之外创建组件，而无需对容器模板进行很多更改(最好不更改)。如果我能以编程方式识别 feedType，为它寻找注册的组件选择器，并自动将 feedData 传递给它，那将是理想的，但如果我必须手动引用这个容器中的每个组件，也没关系。我只是不想将所有渲染逻辑都放在这个容器中，因为那样很快就会变得笨重且难以管理。

提要项目组件将根据提要类型有自己的格式，还有不同的样式，可能还有不同的逻辑操作。我不想要一个巨大的 feedItem 容器组件。

那么，这可能吗？如果是这样，我该怎么做？

Answer 1

如果我能正确理解，也许下面的想法可以帮助你..我以您的示例为例并对其进行了一些修改。

<div class="feed-item-container" *ngFor="let feedItem of feedItemList; let i = index;">
<div class="feed-item">
    <div class="timestamp-display">{{feedItem.createdUtcTimestamp}}</div>

    <!-- equivalent of "if feedItem.feedType == 'foo'", 
    possibly ngIf or ngSwitch, but I'd prefer to not 
    have to explicitly check for each type -->

    <!-- i do not know of any alternative, but to make it a bit more readable
    you can use <ng-container>

    <ng-container *ngIf="feedItem.feedType === 'foo'">
        <!-- you can create your own component and add an @Input() data, so your component will know what it is dealing with (see example below)
        <feed-item-foo [data]="feedItem"/>
    </ng-container>

    <!-- equivalent of "if feedItem.feedType == 'bar'" -->
    <ng-container *ngIf="feedItem.feedType === 'bar'">
        <!-- you can create your own component and add an @Input() data, so 
        your component will know what it is dealing with (see example below)
        <feed-item-bar [data]="feedItem"/>
    </ng-container>
    <!-- equivalent of "if can't match on feedType" -->
    <!-- that is a bit of a pain in the ... --> 
   <ng-container *ngIf='!foo && !bar && !xyz'>
    <feed-item-generic (something) />
   </ng-container>

</div>

你的组件可以而且应该都包含类似“基”类的东西

export class FeedItemBase implements OnInit {
  @Input() data = <YourType>null; // that is a little hack to get the type 
  // correct (was some bug in a angular 4 version as far as i remember)
  constructor() {
  }
  ngOnInit() {
    // if needed .. if not, delete it :)
  }
}

然后所有其他类都可以扩展基类(因为数据将始终相同......

export class FeedItemFoo extends FeedItemBase implements OnInit {
  constructor() {
  }
  ngOnInit() {
    // here you can access data already 
  }
}

如果你只有两种类型(我对此表示怀疑)，你也可以这样做:

<div class="feed-item-container" *ngFor="let feedItem of feedItemList; let i = index;">
<div class="feed-item">
    <div class="timestamp-display">{{feedItem.createdUtcTimestamp}}</div>

    <!-- equivalent of "if feedItem.feedType == 'foo'", 
    possibly ngIf or ngSwitch, but I'd prefer to not 
    have to explicitly check for each type -->

    <!-- i do not know of any alternative, but to make it a bit more readable
    you can use <ng-template>
    <ng-container *ngIf="feedItem.feedType === 'foo'; then fooId;else barId"> 
    </ng-container>

   <ng-template #fooId>
        <!-- you can create your own component and add an @Input() data, so your component will know what it is dealing with (see example below)
        <feed-item-bar [data]="feedItem"/>
    </ng-template>

    <!-- equivalent of "if feedItem.feedType == 'bar'" -->
    <ng-template #barId>
        <!-- you can create your own component and add an @Input() data, so 
        your component will know what it is dealing with (see example below)
        <feed-item-foo [data]="feedItem"/>
    </ng-container>
    <!-- equivalent of "if can't match on feedType" -->
    <!-- that is a bit of a pain in the ... --> 
   <ng-container *ngIf='!foo && !bar && !xyz'>
    <feed-item-generic (something) />
   </ng-container>

</div>

希望对您有所帮助:)