Angular2 不支持 radiogroup - 模板解析错误

Question

背景

我有一个 Angular2 应用程序，它的可访问性很重要。当无线电输入具有相同名称但未包含在 radiogroup 元素中时，我正在使用的可访问性评估器会抱怨。但是当我放一个radiogroup 元素时，Angular2 给出了模板解析错误：

Unhandled Promise rejection: Template parse errors:
'radiogroup' is not a known element:
1. If 'radiogroup' is an Angular component, then verify that it is part of this module.
2. If 'radiogroup' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
<div>
  [ERROR ->]<radiogroup>
    <input type="radio" name="foo id="true" label="True" value="true" />
    <in"): App@2:6 ; Zone: <root> ; Task: Promise.then ; Value: Error:             

守则

import { Component } from '@angular/core';

@Component({
  selector: 'my-component',
  template: `
    <radiogroup>
      <input type="radio" name="my-radio" value="true" />True
      <input type="radio" name="my-radio" value="false" />False
    </radiogroup>
  `
})
export class MyComponent {};

我已将FormsModule 导入到模块中。

Plunkr

Answer 1

radiogroup 不是标准的 HTML 元素，它是一个使用如下的属性，(Check this PLunker)

    <div> 
      <input type="radio" radiogroup="alignment" name="my-radio" value="true" />True
      <input type="radio" radiogroup="alignment" name="my-radio" value="false" />False
    </div>

如果你正在创建一个名为radiogroup的组件，你需要在使用它之前在NgModule中声明它，

更新

您可以添加一个不带模板的指令，这样 Angular 就不会抱怨未知元素，并且它将与基于 XUL 的应用程序一起用于构建 Firefox 等应用程序的用户界面。

@Directive({
  selector: 'radiogroup'
})
export class RadioGroupDirective {  }

这里是Plunker！

我没有在 Firefox 中进行上述测试，所以不确定你是否会得到所有 attributes, properties and methods of radiogroup，理想情况下它应该可以工作。

希望这会有所帮助！