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

Question

我正在尝试制作自定义下拉组件，但是当我尝试通过 select 标签内的 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> and <option> HTML elements are permitted inside <select> element (see here)。至少 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 team implements its own HTML parser

之后得到解决

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

ng-content is not working inside select tag Angular2

angular