angular2重用组件实例的视图

Question

这是一个奇怪的上下文和问题，我知道。 我只想了解我该如何思考，这种方法出了什么问题，为什么。

最后这是一个角度问题的问题。

我们开始吧。

这里是上下文：

我所含的成分多克（后者持有的ngFor回路建立卡的列表）组件卡。 主要关注卡组件。它有一些逻辑并显示一个视图。

这里是码头工人的父，表示搬运工将如何使用的HTML模板：

<div [hidden]="condition"> 
    <home></home> 
</div> 
<div [hidden="!condition"]> 
    <docker></docker 
</div> 

它显示docker或home替代地。

现在home（HomeComponent）想要也显示相同的列表Cards。

通常我会在HomeComponent中添加一个ngFor循环来创建所有卡片。再次。 我将卡实例化两次（一次为docker父母，一次为home父母）。所以每张卡片都有两个正在运行的实例。

比方说，CardComponent有一个复杂的逻辑：收听一些事件并通过发送其他事件作出反应。

而现在的怪异问题：

我不想创建的CardComponent的两个实例（我不想在双重处理的事件）。我只需要一个DockerComponent实例。在HomeComponent中也可以重用它的View（HostView）？所以组件代码只能运行一次，但它的视图要在生成的html中放置两次。 并检查更改（角度机制）以导致更新这两个视图。

这就像：我从DockerComponent（创建它们）传递CardComponent对象的数组到HomeComponent（通过服务），在这里我从每个CardComponent对象中提取视图并将其注入到HomeComponent中的ng容器中。

阿洛斯，具有组件对象：

• 如何访问它的视图？ （不可能？）

• 如何访问ComponentRef？ （这仅在组件是动态创建时才可用，这不是我的情况）

现在，这种情况是错误的，我感觉它。

但是我想要一个关于究竟是什么错误的争论，我应该如何思考这种情况。

此外，什么是角度的限制，明确指出，以及他们背后的理由。 像你没有访问组件视图，也没有它的ComponentRef（这真的很奇怪：当我的组件对象本身我无法访问...组件引用 - 这里Ref是误导，显然不是一个正常的“参考”一词）。

谢谢

Answer 1

我觉得你可以做点别的。让我解释一下。 您可以创建routeroutlet并根据路径显示房屋或码头，而不是在同一页面中显示和隐藏房屋和码头组件。里面都可以有一个ngFor的卡组件（或者如果你不想重复ngFor代码，创建一个“listCardsComponent”）。这种方式角路由器将自动处理卡组件的实例。