首页 文章

如何在角项目的html组件之间传递字符串变量作为参数？

提问于
浏览 次
0

我正在制作一个Angular应用程序，它可以在在线API上查找电影，我可以将其添加到我自己的数据库中，或者从我的数据库中删除它们 . 有3个组成部分： - 电影，其中包含电影卡的模板（由海报 Headers 组成），以显示在其他2个组件中 - 电影：我的收藏中添加的所有电影的列表 . 在这里，您可以单击海报以转到包含电影详细信息的页面，也可以通过单击fab按钮将其从数据库中删除 . - movie-add：一个简单的表单，您可以在线API中按 Headers 或关键字查找电影 . 在这里，单击海报会将您带到详细信息页面，但fab按钮会将其添加到我的数据库中 .

这是电影组件的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>

movie-add（我省略了表格，因为它与我的问题无关）：

<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按钮在第一种情况下带有删除图标为红色，而在第二种情况下带有添加图标的绿色 . 有没有一种简单的方法可以在标签中添加这两个值？

我试过这个，但它不起作用：电影：

<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>
html angular

1 回答

  • 0

    我同意你的问题有点不清楚，但我为你找了一个答案 . 有几种方法可以在角度上进行条件绑定 . 如果要有条件地添加类，可以使用ngClass . 如果要有条件地绑定样式，可以在样式上使用属性绑定，如 [style.font-size.px]="isImportant ? '30' : '16'" ，或者可以使用ngStyle .

    我使用ngStyle构建了一个快速示例应用程序 . 它有一个测试按钮，基于单击切换文件，背景颜色会发生变化 . 让我知道如果这有帮助，或者如果你可以更多地改进你的答案，我会很乐意调整我的例子 .

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

    回复于

相关问题