Подменю остается в фокусе при смене страницы angular 2

ОБНОВЛЕНИЕ №1

После долгих исследований я добился того, что искал (разместив в ответе решение №1), теперь я хочу реализовать *ngFor с той же логикой, но теперь, когда я нажимаю на главное меню, открываются оба меню (каждое подменю работать по желанию), что необходимо, так это при нажатии на Menu1 'SubMenu 1' показывает, а 'SubMenu 2' остается скрытым, и наоборот, когда выполняется щелчок на Menu2 'SubMenu 2' показывает, а 'SubMenu 1' скрывает.

<nav class="navigation">
    <ul class="mainmenu">
        <li class="dropdown-content" (click)="onClickHome()"><a href='javascript:void(0)'>Home</a>
        </li>
        <li [class]="hideUsability" (click)="onSelectMetrics()" *ngFor="let menu of entities"><a href='javascript:void(0)'>{{menu.entity_id}}</a>
            <ul class="dropdown-content" [hidden]="IsHiddenMetrics">
                <li (click)="onClickSubmenu(value.value_id)" *ngFor="let value of menu.values"><a href='javascript:void(0)'>{{value.value_id}}</a></li>
            </ul>
        </li>
    </ul>
</nav>

onSelectExtractor(){
        if(this.IsHiddenExtractor == true){
            this.IsHiddenExtractor= !this.IsHiddenExtractor;
        }
        this.IsHiddenMetrics=true;
    }

    onSelectMetrics(){
        if(this.IsHiddenMetrics == true){
            this.IsHiddenMetrics= !this.IsHiddenMetrics;
        }
        this.IsHiddenExtractor=true;
    }

    onClickSubmenu(value_id: number){
        if(value_id == 2){
            this.router.navigate(['/pages1.html'], { skipLocationChange: true});
        } else{
            this.router.navigate(['/pages2.html'], { skipLocationChange: true});
        }
    }

    onClickHome(){
        this.IsHiddenMetrics= true;
        this.IsHiddenExtractor= true;
        this.router.navigate(['/welcome.html'], { skipLocationChange: true});
    }

ОРИГИНАЛ

Можно оставить подменю открытым при наведении главного меню и после наведения закрыть его, если только не навести подменю (предпочтительно без щелчка) и позволить подменю сфокусироваться после нажатия на него и после изменения страницы или перенаправления на другую страницу?

У меня есть следующий код, и я использую Angular 2;

<nav class="navigation">
    <ul class="mainmenu">
        <li>
            <a>Main Menu 1</a>
            <ul class="submenu">
                <li><a href='toPage2'>SubMenu 1</a></li>
            </ul>
        </li>
        <li><a>Main Menu 2</a>
            <ul class="submenu">
                <li><a href='toPage3'>SubMenu 2</a></li>
            </ul>
        </li>
    </ul>
</nav>

.navigation {
  width: 220px;
}
.mainmenu, .submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}
.mainmenu a {
  display: block;
  background-color: #3E4A5B;
  text-decoration: none;
  padding: 8px;
  color: #FFFFFF;
}
.mainmenu a:hover {
    background-color: #647484;
}
.mainmenu a:active {
   background-color: #EDEEF0;
  color: #151921;
    border-left:solid 4px #3E4A5B;
}
.mainmenu li:hover .submenu {
  display: block;
  max-height: 220px;
}
.submenu a {
  background-color: #647484;
    text-indent: 20px;
}
.submenu a:hover {
  background-color: #EDEEF0 !important;
  color: #151921;
}

.submenu {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 0.5s ease-out;
}