让我们看看我如何使用select2。我的目的是初始化select2并添加_ngcontent-
属性,以便在我的范围内通过scss进行样式设置。
HTML:
<select multiple="multiple" style="display: none;">
<option *ngFor="#item of people" [value]="item.id">
{{item.name}}
</option>
</select>
在 TypeScript 中在 ngAfterViewInit
上进行初始化:
ngAfterViewInit()
{
var element = (<any>$('select')).select2().siblings('.select2-container')[0];
var attribute = ObjectHelper.setElementContentAttribute(this.m_elementRef.nativeElement, element, true);
}
还有一些特殊的魔法函数,可以将_ngcontent
属性克隆到子元素中。这对于许多第三方库非常有用,因为它们会生成一些动态内容:
public static getAngularElementTag(element: Element): string
{
var attrs = [].filter.call(element.attributes, at => /^_nghost-/.test(at.name));
if (attrs.length == 0)
{
return null;
}
return attrs[0].name.replace("_nghost-", "_ngcontent-");
}
public static setElementContentAttribute(hostElement: Element, targetElement: Element, setRecursive?: boolean): string
{
var attribute = this.getAngularElementTag(hostElement);
setRecursive = (setRecursive !== undefined) ? setRecursive : false;
if (attribute !== null)
{
this._setElementContentAttribute(targetElement, setRecursive, attribute);
return attribute;
}
else
{
return null;
}
}
private static _setElementContentAttribute(targetElement: Element, recursive: boolean, attribute) {
targetElement.setAttribute(attribute, '');
if (recursive) {
for (var i = 0; i < targetElement.childElementCount; i++) {
this._setElementContentAttribute(<Element>targetElement.childNodes[i], recursive, attribute);
}
}
}
这个只是用来样式化输入元素的。对于动态添加的元素(选择、选择器),你可能需要捕获一些事件并再次进行操作。