Angular2本地组件/模板重用 [英] Angular2 local components / template reuse

问题描述

我正在编写一些Angular2模板，这些模板的重复部分具有不同的容器.在这种情况下，如果将事物分组并且启用了多部分模式，则视图可以更改.请原谅冗长的示例，但类似这样的内容:

I'm writing some Angular2 templates that have repetitive portions with different containers. In this case, the view can change if things are grouped and if multi section mode is enabled. Please excuse the long example, but something like this:

<template [ngIf]="isCategoryGrouped">
    <div *ngFor="#categories of categories">
        <div>{{ categories.category.name }}</div>
        <div *ngFor="#thing of categories.things">
            <label *ngIf="isMultiSelectMode">
                <input type="checkbox" (change)="updateThingSelection(thing, $event)" />
                <img [src]="thing.image" /> {{ thing.name }}
            </label>
            <a href="javascript: void(0)" (click)="selectThing(thing)" *ngIf="! isMultiSelectMode">
                <img [src]="thing.image" /> {{ thing.name }}
            </a>
        </div>
    </div>
</template>
<template [ngIf]="! isCategoryGrouped">
    <div *ngFor="#thing of things">
        <label *ngIf="isMultiSelectMode">
            <input type="checkbox" (change)="updateThingSelection(thing, $event)" />
            <img [src]="thing.image" /> {{ thing.name }}
        </label>
        <a href="javascript: void(0)" (click)="selectThing(thing)" *ngIf="! isMultiSelectMode">
            <img [src]="thing.image" /> {{ thing.name }}
        </a>
    </div>
</template>

我真的很想重用其中的一部分，而不必编写一个完全独立的组件并将其连接在一起，这需要一个TypeScript文件和一个模板.一种方法是使用本地组件，如下所示:

I'd really like to reuse portions of this without having to write a completely separate component and wire it all together, which would require a TypeScript file and a template. One method would be with local components, something like this:

<sub-component selector="thing-list" things="input">
    <div *ngFor="#thing of things">
        <label *ngIf="isMultiSelectMode">
            <input type="checkbox" (change)="updateThingSelection(thing, $event)"/>
            <img [src]="thing.image" /> {{ thing.name }}
        </label>
        <a href="javascript: void(0)" (click)="selectThing(thing)" *ngIf="! isMultiSelectMode">
            <img [src]="thing.image" /> {{ thing.name }}
        </a>
    </div>
</sub-component>

<template [ngIf]="isCategoryGrouped">
    <div *ngFor="#categories of categories">
        <div>{{ categories.category.name }}</div>
        <thing-list things="categories.things" />
    </div>
</template>
<thing-list [ngIf]="! isCategoryGrouped" things="things" />

我意识到上面只是一个粗略的草图，可能无法按原样工作，但是不幸的是，显然无法重用视图的某些部分.如果我理解正确的话，这种事情在React中就非常简单.

I realize the above is a rough sketch and probably wouldn't work as is, but the apparent inability to reuse portions of the view like this is unfortunate. This sort of thing is quite simple in React, if I understand correctly.

我很好奇其他人已经解决了部分视图重用的优雅方法，而又没有写一个新的组件(我们的设计师就需要了解这些组件和样式等等). ).谢谢.

I'm curious about elegant ways others have solved the reuse-of-portions-of-view without going so far as to write a new component (which our designers would then need to know about and style, etc...). Thanks.

推荐答案

如果各节的结构相同，而数据却不同，则可以提出一个更通用的模型.不必直接引用category和thing，而是将它们映射到在服务中填充到视图之前的通用对象中.

If your sections are identical in structure, just different in data, you could come up with a more generic model. Instead of referring to category and thing directly, map them into a generic object that you populate in a service before it gets to the view.

<div *ngFor="#item of items">
        ---
</div>

这里的项目将根据事物或类别进行填充.

Here items would either be populated from things or categories.

您可以这样称呼

<component [items]="fromThings"></component>
<component [items]="fromCategories"></component>

您基本上是在不直接依赖于实际对象的情况下对视图进行规范化.

You are basically normalizing the view by not depending on the actual objects directly.

这篇关于Angular2本地组件/模板重用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！