jQuery 的每个组件实例的 Angular 2 唯一 ID

Question

我有 Angular 2 组件包含 jquery 组件，我想为我的 Angular 2 组件的每个实例生成 id， 因为我需要为每个组件使用不同的 jquery 选择器

这是我的组件

@Component({
  selector: 'full-calendar',
  templateUrl: 'full-calendar.html'
})
export class FullCalendarComponent {

ngOnChanges(changes: any) {
 
    $('angular2-fullcalendar').fullCalendar('option',changes.options.currentValue)
 
    }
  
}

我想每次使用多个不同的选择器

我找到了这个解决方案

export class GetId {
  protected getId(id: number|string = _.uniqueId()): string {
    return _.lowerFirst(this.constructor.name) + '_' + id;
  }
}

class MyComponent extends GetId {
  ...    
}

和 id 可以这样使用

<input [id]="getId('name')" type="text">

但我仍在寻找内置解决方案。

Answer 1

假设你有一个复选框，

<input class="styled-checkbox" id="{{checkboxId}}" type="checkbox">
<label for="{{checkboxId}}">{{checkboxLabel}}</label>

import { Component, Input } from '@angular/core';
@Component({
    selector: 'checkbox',
    templateUrl: './checkbox.component.html'
})

export class CheckboxComponent {
    @Input() checkboxId:string;
    @Input() checkboxLabel:string;
}

在父级 -->

<checkbox [checkboxId]="Math.random().toString(36).substring(2)"></checkbox>