can multiple < router-outlet > tags exist on a page at the same time and display content?

encountered a picture in which there is a contractible list on the left side of header, and the display area exists at the same time

-main.component.html-

< div class= "main" >

<div class="left"><router-outlet name="main_Left"></router-outlet></div>
<div class="right"><router-outlet name="main_Right"></router-outlet></div>

< / div >

-main.component.ts-
this.router.navigate ([{outlets: {main_Left: "a"}}]);
this.router.navigate ([{outlets: {main_Right:"b"}}]);

can I load main_left and mian_Right at the same time when the screen is initialized? What should I do?
the router (main_left,main_right) I now set in app.component.ts is not a parent-child relationship
in addition, if I have a list of search criteria in header, how can I refresh the list on the left when I click on the query?
I am now in main.component.html, adding trigger, to the trigger.emit ([param1]) call used in header.ts, but I find that the parameters cannot be passed

can someone help me? Thank you