Load a component into another template

Question

I have an angle app with a Drawer. The application usually works by displaying its contents in the Drawer/content central panel.

However, by clicking on a button you need to open a new tab in the browser but displaying another component in a template other than the default one.

From what I understand I must change the route module specifying a daughter route so that the component uses a router-outlet of another component, and not the standard component (app.Component). For this I created a "Clearlayoutcomponent" with a router-outlet only, and specified in the route module that the "patient/:id" route should use the "Clearlayoutcomponent" template".

const routes: Routes = [

{
path: 'pessoas',
component: ListaPessoasComponent,
data: { title: 'Pessoas' }
},
{
path: '',
component: ClearLayoutComponent,
children: [
{
     path: 'paciente/:id',
     component: PacienteComponent,
     data: { title: 'Paciente' }
}]}];

The method I call to open the tab is this:

 Editar(id:number){
 window.open(`./paciente/${id}` ,"_blank");
 }

Everything works, but still the template of the app.Component is displayed in the new tab.