Angular：动态绑定的href无法在lightBox中正常工作？

Question

我有2个div，如下所示，第一个div对元素的href属性使用动态绑定，第二个div使用静态绑定。静态灯可以与灯箱配合使用，但不能动态绑定网址，该如何解决？

 <div class="row no-gutters">
                      <div class="col-md-6 col-lg-4 item zoom-on-hover" >
                          <a class="lightbox"[attr.href]="l1">
                              <img class="img-fluid image" src="{{l1}}">
                              <span class="description">
                                  <span class="description-heading">Lorem Ipsum</span>
                                  <span class="description-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
                              </span>
                          </a>
                      </div>
                      <div class="col-md-6 col-lg-4 item zoom-on-hover">
                          <a class="lightbox" href="assets/hos1.jpg">
                              <img class="img-fluid image" src="{{l2}}">
                              <span class="description">
                                  <span class="description-heading">Lorem Ipsum</span>
                                  <span class="description-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
                              </span>
                          </a>
                      </div>

Answer 1

您无需使用[attr.href]进行属性绑定。您可以按如下方式使用[href]：

<a class="lightbox" [href]="l1">

提供l1是包含链接的组件属性