角2/4：如何在弹出窗口中使用现有组件实例？

Question

I have component with selector 'test-comp' which is already loaded in a html page with code

analytics.html

<test-comp #refcomp ></test-comp>

I have a popup dialog in the same analytics.html page in which I would like show the same instance(#refcomp) instead of loading it(test-comp) again.

-Currently I'm again creating one more instance

<test-comp #popup ></test-comp>

How can I do that?

Answer 1

Actually, we have to render it twice. But to fulfill your requirement, we can use a small hack.

Place test-comp inside a template/ng-template tag.

<template  #myTemplate>
        <test-comp #refcomp ></test-comp>
 </template>

use it wherever you want to display (on the main page and on model pop-up), using below code

<div *ngIf="false; else myTemplate"></div>