Невозможно связать, поскольку это не известное свойство углового

Question

Я пытаюсь условно установить имя класса на основе логической переменной. Я установил переменную в родительском компоненте:

  public alteredSidebar: boolean;

И это мой хотя и условный процесс, определяющий, какой это класс:

  <div [class]="alteredSidebar == false ? 'secondsidenav' : 'sidenav'" id="rollup-sidenav" [ngClass]="{ 'greyout': greyOut }"></div>

Я определил 2 класса с файлом css, один из которых называется secondsidenav, а другой - sidenav. Где бы я ни устанавливал логическое значение как ложное, я хотел бы, чтобы имя класса равнялось секундам идентификатора, а там, где оно не ложно, это будет идентификатором sidenav. Вот пример того, где я его использую, и я ожидаю, что класс будет установлен в 'secondsidenav':

<app-rollup [data]="rollupData" (resetCalled)="onRollupReset()" (entrySelected)="onRollupSelectEvent($event)" [alteredSidebar]="false">
            </app-rollup> 

Однако я получаю следующую ошибку: «Невозможно выполнить привязку к« alteredSidebar », поскольку это не известное свойство« app-rollup ».»

Answer 1

Я бы предложил просто условно установить свойство класса div-tags следующим образом

[class]="alteredSidebar ? 'sidenav' : 'secondsidenav'"

Таким образом, вы получите более читаемое условие? положительный случай: отрицательный случай и вам не нужно сравнивать вашу переменную ни с чем.

Answer 2

Как сказал @junk, вы должны использовать декоратор @Input () в компоненте app-rollup, и я хотел бы добавить, не смешивайте [className] с ngClass, это может быть не связано с вашей проблемой, но это становится действительно глючным, если вы используете реактивное свойство для программного добавления или удаления класса, просто выберите один и постарайтесь не смешивать их, это также сделает код более согласованным. Да, и правильный синтаксис: [className], вы, вероятно, путаете его с [class.foo] = "expresion", который будет применять класс 'foo', если выражение истинно

Лично я бы сделал что-то подобное, также придерживаясь одного подхода считается лучшей практикой

<div id="rollup-sidenav" [ngClass]="{
  'greyout': greyOut, 
  'secondsidenav': !alteredSidebar,
  'sidenav': alteredSidebar 
  }">
</div>

Надеюсь, это поможет, дайте мне знать, если это не так!

Answer 3

@ Berheet .. попробуйте это

присвойте значение alteredSidebar в самом компоненте и передайте его, как показано ниже

parentComponent.ts

public alteredSidebar: boolean = false;

parentComponent.html

<app-rollup [data]="rollupData" (resetCalled)="onRollupReset()" (entrySelected)="onRollupSelectEvent($event)" [alteredSidebar]="alteredSidebar">
            </app-rollup> 

Добавить вход в дочерний компонент

childComponent.ts

@Input() alteredSidebar: boolean;

childComponent.html

<div [class]="alteredSidebar == false ? 'secondsidenav' : 'sidenav'" id="rollup-sidenav" [ngClass]="{ 'greyout': greyOut }"></div>

Answer 4

использовать @Input() декоратор на нем

@Input()
public alteredSidebar: boolean;