angular2重用组件实例的视图

Question

我知道这是一个奇怪的背景和问题。 我只是想了解我应该如何思考，这种方法有什么问题以及原因。

最后，这是一个有角度的建筑问题。

让我们开始。

以下是上下文：

我有一个组件卡包含在组件Docker中（它包含在ngFor循环中创建的卡列表）。 主要关注卡组件。它有一些逻辑并显示视图。

以下是docker父级的html模板，展示了如何使用docker：

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

它会显示docker或home。

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

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

让我们说CardComponent有一个复杂的逻辑：听一些事件并通过发出其他事件做出反应。

现在奇怪的问题：

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

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

Alos，拥有组件对象：

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

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

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

但是我想就究竟是什么问题进行辩论，我应该如何在角度上思考这种情况。

此外，还有明确说明的角度限制及其背后的基本原理。 就像你无法访问组件视图一样，也没有访问它的ComponentRef（这真的很奇怪：当我是组件对象本身时，我无法访问...组件引用 - 这里Ref是误导，它显然不是一个正常的参考＆＃34;术语。

由于

Answer 1

我认为你可以做点别的事。让我解释一下。 您可以创建routeroutlet，而不是在同一页面中显示和隐藏home和docker组件，并根据路径显示home或docker。内部都可以有一个ngFor of cards组件（如果你不想重复ngFor代码，可以创建一个“listCardsComponent”）。这样，角度路由器将自动处理卡组件的实例。