Angular2 本地组件/模板复用
[英] Angular2 local components / template reuse
本文介绍了Angular2 本地组件/模板复用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在编写一些 Angular2 模板，这些模板具有不同容器的重复部分.在这种情况下，如果事物被分组并且启用了多部分模式，则视图可能会发生变化.请原谅这个很长的例子，但像这样:
<div *ngFor="#categories of category"><div>{{category.category.name}}</div><div *ngFor="#thing of category.things"><label *ngIf="isMultiSelectMode"><input type="checkbox" (change)="updateThingSelection(thing, $event)"/><img [src]="thing.image"/>{{事物名称}}<a href="javascript: void(0)" (click)="selectThing(thing)" *ngIf="!isMultiSelectMode"><img [src]="thing.image"/>{{事物名称}}</a>
<template [ngIf]="!isCategoryGrouped"><div *ngFor="#thing of things"><label *ngIf="isMultiSelectMode"><input type="checkbox" (change)="updateThingSelection(thing, $event)"/><img [src]="thing.image"/>{{事物名称}}<a href="javascript: void(0)" (click)="selectThing(thing)" *ngIf="!isMultiSelectMode"><img [src]="thing.image"/>{{事物名称}}</a>
我真的很想重用其中的一部分，而不必编写一个完全独立的组件并将它们连接在一起，这将需要一个 TypeScript 文件和一个模板.一种方法是使用本地组件，如下所示:
<div *ngFor="#thing of things"><label *ngIf="isMultiSelectMode"><input type="checkbox" (change)="updateThingSelection(thing, $event)"/><img [src]="thing.image"/>{{事物名称}}<a href="javascript: void(0)" (click)="selectThing(thing)" *ngIf="!isMultiSelectMode"><img [src]="thing.image"/>{{事物名称}}</a>
</子组件><模板 [ngIf]="isCategoryGrouped"><div *ngFor="#categories of category"><div>{{category.category.name }}</div><thing-list things="categories.things"/>
<thing-list [ngIf]="!isCategoryGrouped" things="things"/>
我意识到以上是一个粗略的草图，可能无法按原样工作，但很遗憾，显然无法像这样重用部分视图.如果我理解正确的话，这种事情在 React 中非常简单.
我很好奇其他人解决视图部分重用的优雅方式，而无需编写新组件(然后我们的设计师需要了解和样式等...).谢谢.
解决方案
如果您的部分在结构上相同，只是数据不同，您可以想出一个更通用的模型.不要直接引用 category 和 thing，而是将它们映射到一个通用对象中，然后在它到达视图之前填充到服务中.
---
这里的项目可以从事物或类别中填充.
然后你可以这样称呼它
<component [items]="fromThings"></component><component [items]="fromCategories"></component>
您基本上是通过不直接依赖实际对象来规范化视图.
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>
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" />
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.
解决方案
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.
You can then call it like so
<component [items]="fromThings"></component>
<component [items]="fromCategories"></component>
You are basically normalizing the view by not depending on the actual objects directly.
这篇关于Angular2 本地组件/模板复用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
