Question

我正在使用angular-4.x和内部组件我正在使用一些'abc'选择器，如下所示：

@Component({
  selector: "Abc",
  templateUrl: "Abc.html",
  styleUrls: [
    "Abc.css"
  ]
})

但是“Abc”标记也存在于DOM中，但我希望它表现为“ng-container”，它只反映子DOM 在页面中而不是标签本身。

Answer 1

这可能适用于您，也可能不适用，具体取决于用例。

无论如何，您的选择器不必是标签选择器，它也可以是属性选择器，这意味着不会添加新标签在渲染输出中。

因此，如果您的组件具有以下元数据......

selector: '[abc]',
template: `<ng-content></ng-content>`
styles: [`:host { background-color: red }`],

你就这样使用它......

<div abc>
  <span>Hello <b>world!</b></span>
</div>

渲染的输出就是那个（没有添加<abc>标签）。

另一种可能的“解决方案”是使用ARIA为您的自定义元素分配角色。例如，如果您希望<abc>成为按钮，则可以在课程中执行此类操作。

@HostBinding('role') role = 'button'

这意味着，从语义上讲，它仍然是一个按钮，即使它不是<button>元素。

同样，可能会或可能不适用于您的用例，但这是一个解决方法的想法。

否则，目前无法实现您想要的组件。 Structural directives即将结束，但之后您将无法应用样式，因为styles不是@Directive的有效元数据。

但是你可以通过注入ViewContainerRef和TemplateRef并在OnInit生命周期钩子中实例化模板来创建一个无操作的结构指令。

constructor(private templateRef: TempalteRef,
            vcr: ViewContainerRef) {
}

ngOnInit() {
  this.vcr.createEmbeddedView(this.templateRef)
}

但如果您不希望渲染元素封装其内容，则仍需要将其与<ng-container>一起使用。所以你的请求“像<ng-container>但不同，在这种情况下并没有真正削减它。