Angular 灯箱：无法绑定到 'data-lightbox'，因为它不是 'a' 的已知属性

Question

我读了Angular。它说如果你想绑定一个属性它应该用 [] 包裹起来。所以我在这里做了什么，但是我遇到了错误。知道我做错了什么吗？

我的要求是让 data-lightbox 的值就是我 setting/sending 来自另一个组件（父组件）

图片-display.component.ts

@Component({
    selector: 'app-image-display',
    templateUrl: './image-display.component.html',
    styleUrls: ['./image.component.css']
  })
  export class ImageDisplayComponent implements OnInit {
    @ViewChild('inspImage') image: ElementRef
    @Input() inspection: LineSideInspection
    inpsectionId: number;
    santizer: DomSanitizer

    constructor(private imageService: ImageDisplayService, private sanitizer: DomSanitizer) {}

    ngOnInit() {
      this.getMyImage('/getimage/' + this.inspection.id );
        this.inpsectionId = this.inspection.id;
    }
}

图片-display.component.html

<a [href]="sanitize(inspImage.src)" [data-lightbox]="inspectionId" data-title="inspect.inspectionDescription"> 
    <img #inspImage width="110px" height="95px">
</a>

package.json:

"lightbox2": "^2.10.0",

Answer 1

尝试使用 -

<a [href]="sanitize(inspImage.src)" [attr.data-lightbox]="inspectionId" data-title="inspect.inspectionDescription"> 
    <img #inspImage width="110px" height="95px">
</a>

Answer 2

我找到了一种在灯箱中显示标题的方法。这是我所做的：

在component.ts中，我在init方法中声明了一个字符串变量并赋值，然后在html中，我将该变量放在双括号中。

html:

<a [href]="sanitize(inspImage.src)" [data-lightbox]="inspectionId" data-title="{{inspectionName}}">

TS:

public inspectionName: string;

ngOnInit(){
    this.inspectionName = this.inspection.inspectionName;
}

Angular 灯箱：无法绑定到 'data-lightbox'，因为它不是 'a' 的已知属性

Angular lightbox: Can't bind to 'data-lightbox' since it isn't a known property of 'a'

lightbox

lightbox2

angular

Angular 灯箱：无法绑定到 'data-lightbox'，因为它不是 'a' 的已知 属性

Angular lightbox: Can't bind to 'data-lightbox' since it isn't a known property of 'a'

lightbox

lightbox2

angular

Angular 灯箱：无法绑定到 'data-lightbox'，因为它不是 'a' 的已知属性