Question

我很难绑定到主机元素＆＃39; id＆＃39;我的select-picker指令中的属性。我使用的是@HostBinding('attr.id')，但它会返回undefined。我检查了实际的DOC，看起来这就是完成这个简单任务的方式。

这是我的组件：

import {Component, OnInit, Input, Output, EventEmitter, AfterViewInit, HostBinding} from '@angular/core';
declare const $;

@Component({
    selector: '[select-picker]',
    templateUrl: 'select-picker.component.html'
})

export class SelectPickerComponent implements OnInit, AfterViewInit {

    @Input() options: Array<Object>;
    @Input() @HostBinding('class.cancelable') cancelable: boolean;
    @Input() @HostBinding('class.expand-up') expandUp: boolean;
    @Input() @HostBinding('style.width') elemWidth: string;
    @HostBinding('attr.id') id: string;

    @Output() value: EventEmitter<boolean> = new EventEmitter<boolean>();

    select: any;

    constructor() {
    }

    ngOnInit() {
        console.log(this.id) // <-- this logs 'undefined';
    }

    ngAfterViewInit() {
        const self = this;
        this.select = $(`#${this.id} select`).selectize({ // this init works, but with `id="undefined"`
            readOnly: true,
            onChange: function (val) {
                self.value.emit(val);
            },
            dropdownDirection: 'up'
        });
    }

    discardValue() {
        this.select[0].selectize.setValue(0);
    }
}

这是视图（来自父组件where指令）：

<div select-picker id="page-options" [options]="pageOptions" [elemWidth]="'200px'" (value)="setItemsPerPage($event)"></div>

Answer 1

静态值的属性绑定也可以通过简单的方法完成：

@Input() id: string;

两个版本 - <div id="some-static-id" ...>和<div [id]="someDynamicId" ...> - 都会在使用@Input()时设置组件的值。

编辑：但是，强烈建议不要在Angular中使用jQuery和ID查找。我会质疑你的方法是否是达到你想要的最佳选择。您应该创建一个单独的问题，在其中解释您尝试完成的内容以及使用Angular执行此操作的最佳方法。

Answer 2

如果你想获取Id值，只需使用@ViewChild而不是@HostBinding

<div #myDiv></div>


@ViewChild('myDiv') myDiv: ElementRef;

的console.log（this.myDiv.nativeElement.id）

然后使用ElementRef的方法来获取id属性

Answer 3

您可以使用指令DOM上的getAttribute方法直接检索元素的属性值。这仅在您拥有静态元素id时才有效。如果您想动态传递id，请使用Input绑定。

constructor(private elementRef: ElementRef){}
ngOnInit() {
    this.elementRef.nativeElement.getAttribute('id')
}

Plunker Demo

Angular 4 @HostBinding（＆＃39; attr.id＆＃39;）不起作用（未定义）

3 个答案: