Как загрузить компонент один раз и просто изменить данные внутри него, чтобы сделать рендеринг html?

Question

Что ж, у меня есть сценарий, в котором на моей панели навигации есть несколько страниц, и, нажав, скажем, свяжитесь с нами, компонент «Контакты» загружен, он запускается ngOnInit.

Теперь пользователь переключается на другую веб-страницу, нажимая «Наши продукты», теперь загружается компонент Наши продукты.

Теперь, когда пользователь снова нажимает на ссылку «Связаться с нами», мой компонент «Контакты» повторно инициализируется (поскольку ngOnInit запускается снова). Но я хочу, чтобы он просто показывал предыдущий компонент html.

PS: на панели навигации есть switchCase, в котором вызывается каждый компонент. Таким образом, при нажатии на одну панель запускается этот компонент.

@Component({
    selector: 'example',
    templateUrl: "./test.component.html",
    styleUrls: ["./test-common.css"],
  })

  export class DummyComponent{ 

  @Input('nameOfSection')name = 'Home'; 

  changeName() {
    this.name = "duck";
  }
}

HTML код, где вызывается этот компонент, выглядит следующим образом:

<div ngSwitch> 
<example ngSwitchCase> </example>
</div>

Поэтому, когда выполняется этот случай переключения, компонент инициализирован. Я хочу, чтобы каким-то образом я мог повторно использовать один раз инициализированный компонент.

Этот компонент является примером. Мне нужно, чтобы при первом запуске коммутатора этот компонент загружался. Но при дальнейших запусках уже загруженный компонент следует использовать повторно.