在Angular中,使用attr.data-target
和attr.id
绑定属性时,可能会遇到它们不起作用的问题。这通常是因为Angular的属性绑定机制与原生HTML的属性绑定机制不同。以下是一种解决方法:
[attr.data-target]
和[attr.id]
语法来绑定属性,而不是attr.data-target
和attr.id
。这样可以告诉Angular这是一个属性绑定,而不是一个普通的HTML属性。
@HostBinding
装饰器来直接绑定属性。@HostBinding
装饰器可以用于绑定宿主元素的属性。在组件类中添加以下代码:
import { Component, HostBinding } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {
@HostBinding('attr.data-target') dataTarget = '#myModal';
@HostBinding('attr.id') id = 'myButton';
}
然后在模板中使用组件:
通过以上两种方式,你应该能够正确地绑定data-target
和id
属性,使其起作用。