Как я могу передать строковую переменную в качестве аргумента между html-компонентами углового проекта?

Question

Я создаю приложение Angular, которое просматривает фильмы в онлайн-API, который я могу добавить в свою базу данных или удалить из своей базы данных.Есть 3 компонента: - фильм, который имеет шаблон карты фильма (состоящий из плаката + заголовок) для показа в двух других компонентах - фильмы: список всех фильмов, добавленных в мою коллекцию.Здесь вы можете либо нажать на постер, чтобы перейти на страницу с подробностями о фильме, либо удалить его из моей базы данных, нажав на потрясающую кнопку.- movie-add: простая форма, где вы можете искать фильмы по названию или ключевому слову в онлайн-API.Здесь также, нажав на плакат, вы попадете на страницу с информацией, но потрясающая кнопка добавит его в мою базу данных.

вот HTML-код для компонента фильма:

<div class="card green lighten-5">
  <div class="card-image">
    <a routerLink="/movies/movie/{{movie.id}}">
      <img src={{movie.poster}} alt={{movie.title}}>
    </a>
    <a class="btn-floating halfway-fab waves-effect waves-light red" (click)="onClick(movie)"><i class="material-icons">delete</i></a>
  </div>
  <div class="card-content">
    <p><b>{{movie.title}}</b></p>
  </div>
</div>

Это мои фильмы:

<h2>Movies</h2>
<div class="row">
  <div class="col s6 m3" *ngFor="let movie of movies">
          <media-movie [movie]='movie' (selected)='deleteMovie(movie)'></media-movie>
  </div>
</div>

добавление фильма (я пропустил форму, поскольку она не относится к моему вопросу):

<div class="row">
  <div class="col s6 m3" *ngFor="let movie of movies">
      <media-movie [movie]='movie' (selected)='addMovie(movie)'></media-movie>
  </div>
</div>

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

Я пробовал это, но это не работает: movie:

<a class="btn-floating halfway-fab waves-effect waves-light {{color}}" (click)="onClick(movie)"><i class="material-icons">{{iconAction}}</i></a>

фильм-добавить:

<media-movie [movie]='movie' [color]=green [iconAction]='add' (selected)='addMovie(movie)'></media-movie>

Answer 1

Я согласен, что ваш вопрос немного неясен, но я попробовал ответить вам.Есть несколько способов сделать условное связывание в угловых.Если вы хотите условно добавить класс, вы можете использовать ngClass .Если вы хотите условно связать стили, вы можете использовать привязку свойств к стилю, подобному этому [style.font-size.px]="isImportant ? '30' : '16'", или вы можете использовать ngStyle .

Я создал быстрый пример приложения с использованием ngStyle.Он имеет тестовую кнопку, и цвет фона изменяется в зависимости от щелчка по файлу переключения.Дайте мне знать, если это поможет, или если вы сможете немного уточнить свой ответ, я был бы рад настроить мой пример.

https://stackblitz.com/edit/angular-312aft