Angular 在没有组件包装器的情况下将角度组件呈现到DOM中

我有这个按钮，我在我的网站的多个地方使用

因此，我将其移动到组件。我称之为

GetInvolvedButtonComponent

但是，我现在不能使用这个组件，因为Angular正在它周围包装一个特殊的HTML标记。这引起了一个问题

如何将HTML直接呈现到节中，而不将其包装在该标记中

到目前为止，我所掌握的情况如下：

参与按钮.component.html

<!-- TODO: This is going to route to another page called "Get Involved" -->
<a class="btn btn-primary center" routerLink="/contact">Get Involved!</a>

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "[get-involved-button]",
  templateUrl: "./get-involved-button.component.html",
  styleUrls: ["./get-involved-button.component.css"],
})
export class GetInvolvedButtonComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {}
}

当我在开发人员控制台中检查DOM元素时，我看到的是：

---

根据@alou在这里的评论，我不得不

:host { display:contents }

---

在组件的CSS文件中，它可以工作。

您可以发布包装器html屏幕截图或代码吗？如果它是一个组件，则无法避免为组件添加html标记。一种解决方法是使用一些实际上忽略容器元素的css：':host{display:contents；}`检查兼容性。@alou，您真的可以在

[

和

]

之间使用一个名称作为选择器，并且可以应用于任何html标记，例如div。我可以看看它的外观，以供将来参考吗？我已经有好几年没有做过任何有棱角的动作了，我不知道this@MikeWarren，他的意思是使用一个实际的html元素作为组件选择器，例如[div]，它实际上会为所有div标记呈现组件。我不知道这是否真的是一个选择，但它会起作用。