Angular2 不支持无线电组 - 模板解析错误

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，理想情况下它应该可以工作。

希望对您有所帮助！！

Angular2 不支持无线电组 - 模板解析错误

radiogroup not supported in Angular2 - template parse errors

radio-group

angular2-template

angular