ng-content 在选择标签 Angular2 中不起作用 [英] ng-content is not working inside select tag Angular2
问题描述
我正在尝试制作一个自定义下拉组件，但是当我尝试通过 ng-content 在 select 标签中访问数据时，它不起作用.
i am trying to make a custom dropdown component but when i try to access data through ng-content inside select tag its not working.
这是我的自定义组件 html 文件:
this is my custom-component html file:
<select class="form-control">
<ng-content></ng-content>
</select>
这是我调用组件的主要 html 文件:
this is my main html file where i am calling the component:
<dropdown>
<option value="">Select details type</option>
<option value="">Personal</option>
<option value="">General</option>
<option value="">Contact</option>
<option value="">Settings</option>
</dropdown>
我做错了什么???
推荐答案
目前 angular2 使用原生(浏览器)HTML 解析器.根据标准只有 和 HTML 元素允许在 元素(请参阅此处).至少 Chrome 会删除所有其他 HTML 标签.尝试在 Chrome 中执行下一段代码:
Currently angular2 uses native (browser) HTML parser. According to the standard only <optgroup> and <option> HTML elements are permitted inside <select> element (see here). At least Chrome removes all other HTML tags. Try to execute the next code in Chrome:
var div = document.createElement('div');
div.innerHTML = '<select><ng-content></ng-content></select>';
console.log(div.innerHTML) // "<select><select>"
因此，当 angular2 开始处理标记时，
So, at the time angular2 will start to process the markup, <ng-content> will be already removed.
这个问题可以在(如果)angular2 团队实现自己的 HTML 解析器之后解决
This issue can be resolved after (and if) angular2 team implements its own HTML parser
这篇关于ng-content 在选择标签 Angular2 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
