Angular：在 2 个地方使用完全相同的组件答案

【问题标题】：Angular: Using the exactly same component in 2 placesAngular：在 2 个地方使用完全相同的组件
【发布时间】：2019-07-16 19:38:48
【问题描述】：

我尝试做一个在父组件的 2 个部分中使用的组件。要了解我想要做什么，请检查：

<div class="root>
    <div class="for-desktop">
        <filter></filter>
    </div>
    <div class="for-mobile">
        <copy-of-filter></copy-of-filter>
    </div>
</div>

所以我希望单个过滤器组件位于 2 个不同的位置，而不需要实例化 2 个组件。有可能吗？

【问题讨论】：

我认为您应该问自己是否需要相同的组件，或者您是否希望在同一组件的两个实例之间共享完全相同的状态。如果两个实例无法同时打开，但您希望能够在它们之间切换，则必须创建一个跟踪状态的服务，并使用建议的 ngif 解决方案 dota2pro

标签： angular components

【解决方案1】：

无需实例化 2 个组件

我假设您想知道是否可以在 Angular 中使用单例组件？这个问题的答案是否定的。

指令和组件（角度组件也是指令）并非设计为单例。您可以在它们之间共享一个单例服务来实现您想要的。

【讨论】：

ngOnInit 只是一个生命周期钩子，实现与否无所谓，反正组件是初始化的。
@dota2pro，对不起，在单身人士的情况下，我无法理解你的观点。但据我所知，即使一个组件因为 ngIf=false 而没有被投影到 DOM 中，它还是会被初始化。如果我错了，请纠正我。
我在页面加载时看到一个 console.log 提示，在呈现组件时看到第二个提示。因此，即使它没有被渲染，它也会被初始化，但它可能在渲染时被销毁并重新初始化。
@robert，我错过了第一行 :) 好吧，据我所知，组件是否被渲染或没有被初始化。但好像不是。好吧，这个评论线程变得越来越长，关于组件的主题相当不相关。 :)
@dota2pro，第二次初始化属于不同的实例。它与单身没有任何关系。