ng-content在select标签Angular2中不起作用

Question

我正在尝试制作自定义下拉组件，但当我尝试通过选择标签内的ng-content访问数据时，它无法正常工作。

这是我的自定义组件html文件：

<select class="form-control">

    <ng-content></ng-content>

</select>

这是我调用组件的主要html文件：

<dropdown>
        <option value="">Select details type</option>
        <option value="">Personal</option>
        <option value="">General</option>
        <option value="">Contact</option>
        <option value="">Settings</option>
 </dropdown>

我做错了什么???

Answer 1

目前angular2使用本机（浏览器）HTML解析器。 根据标准，只有<optgroup>和<option>允许在<select>元素内部使用HTML元素（参见此处 ）。 至少Chrome会删除所有其他HTML标记。 尝试在Chrome中执行下一个代码：

var div = document.createElement('div');
div.innerHTML = '<select><ng-content></ng-content></select>';
console.log(div.innerHTML) // "<select><select>"

因此，当angular2开始处理标记时， <ng-content>将被删除。

在（并且如果） angular2团队实现其自己的HTML解析器之后，可以解决此问题