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元素（请参阅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>将被删除。

此问题可以在（{if} angular2 team implements its own HTML parser

之后解决

ng-content在select标签Angular2

1 个答案: