Angular 7, добавление класса к компоненту

Question

Я хочу динамически добавить класс blurred к моим угловым компонентам.Мой файл app.component.html выглядит следующим образом:

<app-navbar [ngClass]="{blurred: shouldBlurComponent}"></app-navbar>

<div class="main">
  <div [ngClass]="{blurred: shouldBlurComponent}">
    <app-header></app-header>
  </div>
  <div class="router-outlet">
    <router-outlet ></router-outlet>
  </div>
  <app-footer [ngClass]="{blurred: shouldBlurComponent}"></app-footer>
</div>

Мой размытый класс выглядит следующим образом:

.blurred {
  -webkit-filter: blur(5px) grayscale(90%);
}

Он производит такой эффект (мой макет уничтожен): Как видите, он работает правильно только для компонента app-header , поскольку он заключен в селекторы div .К сожалению, подобная уловка не работает для других компонентов.Я также попытался применить размытый класс непосредственно внутри моего app-navbar и app-footer компонента, и он работает так, как должен.

Как правильно добавить мой размытый класс в мой дочерний компонент из моего app.component.html?Если это возможно, я хочу избежать передачи его в качестве параметра.

РЕДАКТИРОВАТЬ:app-footer html

<footer class="fixed-footer">
  <div class="row">
    <div class="col-md-5">
      <a>{{'footer.adminContact' | translate}}</a>
    </div>
    <div class="col-md-5">
      {{'footer.disclamer' | translate}}
    </div>
  </div>
</footer>

app-footer ts

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

app-footer css

.fixed-footer{
  width: 100%;
  position: fixed;
  bottom: 0;
  background-color: #5e5e5e;
  border-color: black;
  color: black;
  text-align: center;
  padding: 30px;
  border-top:  2px black solid;
  z-index:1;
}

EDIT2:Я сделал простую демонстрацию Рабочая демонстрация здесь :

Answer 1

.blurred {
  -webkit-filter: blur(5px) grayscale(90%);
}

добавьте это в style.css

Добавьте shouldBlurComponent в файл службы (BlurnService).и создайте функцию для проверки

checkStatus() {
if (this.BlurredService.shouldBlurComponent) {
      return 'blurred';
    }
}

В HTML [ngClass]="checkStatus()" Добавьте эту.

Answer 2

Размытие звучит как глобальный класс, и его следует добавить в файл styles.css или в любую другую глобальную таблицу стилей, имеющуюся в вашем приложении.

Причина, по которой он не работает, заключается в том, чтопотому что элементы по умолчанию имеют display: inline.В результате чего они не имеют измерений внутри вашего приложения, только дочерние компоненты имеют размеры

Добавьте это в таблицу стилей:

app-header,
app-footer,
app-navbar {
  display: block;
}

Реальная причинаэто не работает, потому что вы используете фиксированное позиционирование.Согласно спецификациям html, всякий раз, когда элемент имеет фильтр, он становится новым содержащим блоком для потомков с абсолютным и фиксированным положением.Это означает, что любой дочерний элемент элемента с фильтром будет располагаться в соответствии с фильтруемым элементом.

Мой совет - лучше взглянуть на то, как структурировать ваше приложение.Не используйте float / fixed для вашей структуры.Но взгляните на дисплей flex или grid

Кроме того, вы должны использовать filter: blur(5px) grayscale(90%);.Префикс webkit больше не нужен, и таким образом вы поддерживаете больше браузеров.Если вы используете угловой код, вам вообще не нужно добавлять префиксы, потому что они добавляются автоматически на основе поддержки браузера, упомянутой в .browserslistrc файле

.