я хочу повлиять на css родительского компонента, когда дочерний компонент загружен в angulara

Question

Я создал блог, используя angular, в котором у меня есть компонент root, и у него есть панель навигации с ссылками на маршрутизатор для создания одностраничного приложения. то, что я хочу сделать, это когда дочерний компонент загружен, я хочу затемнить фон вокруг ссылки. Я закодировал логи c таким образом, что ссылка подсвечивается, когда мы нажимаем на нее, но при перезагрузке страницы выделение не подсвечивается. Мне нужен код logi c, который может работать даже при перезагрузке страницы

, вот мой код

app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  public bool : boolean[] = [false,false,false];

  public navItems : string[] =[
    'home',
    'about',
    'contact'
  ];

  btnClick(i:any){
    this.bool = [false, false,false];
    this.bool[i] = true;
  }
}

app. компонент. html

<div>
  <nav>
    <label for="header">TestApp</label>
    <ul>
      <li *ngFor="let item of navItems; let i=index" routerLink="{{item}}"
       [class.active]="bool[i]" (click)=btnClick(i)>
        {{ item }}
      </li>
    </ul>
  </nav>
</div>

app.component.s css

$nav: #027bdd;

:host {
  font-family: 'Montserrat', sans-serif;
  /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; */
  font-size: 14px;
  color: #333;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body{
  margin: 0;
}

app-root{
  margin: 0;
}
h1{
  text-align: center;
}
nav{
  font-size: 18px;
  position: relative;
  width: 100vw;
  height: 60px;
  color: white;
  margin: 0;
  display: flex;
  align-items:center;
  justify-content: space-between;
  background: $nav;
  z-index: 123;
  label{
    font-weight: 900;
    margin-left: 20px;

  }
  ul{
    margin: 0;
    padding: 0;
    display: inline-flex;
    justify-content: space-around;
    width: 35vw;
    li{
      position: relative;
      width: 140px;
      height: 60px;
      align-items: center;
      display: inline-flex;
      list-style: none;
      justify-content: center;
      text-transform: capitalize;
      outline: none;
      cursor: pointer;
    }
  }
}
.active{
  transition: background 0.2s ease-in-out;
  cursor: pointer;
  background: darken($nav, 10%);
}

Answer 1

То, что вы ищете, является routerLinkActive (https://angular.io/api/router/RouterLinkActive). Он встроен в Angular. Директива устанавливает класс css на основе текущего активного маршрута.

Подробнее об этом можно прочитать здесь: https://angular.io/guide/router#router -линки

В противном случае возникает аналогичный вопрос, отвечающий на вашу проблему. См. В Angular, как вы определяете активный маршрут?