Javascript 如何在呈现的HTML中删除额外的包装元素？

我3天前开始学习angular 5，所以我对它很陌生。我也使用angularJS和React来开发应用程序，我想我不明白Angular5组件是如何充分工作的。例如，如果我创建一个自定义按钮，其中包含一个自定义文本（我不是说应该这样做，但这是一个简单的示例，说明了我的观点），如下所示：

<app-button>
  <app-text>
    My Text
  </app-text>
</app-button>

我的文字

渲染的DOM将导致：

<app-button>
  <button>
    <app-text>
      <span>
        My Text
      </span>
    </app-text>
  </button>
</app-button>

我的文字

这是不可读的，我想知道是否有办法删除此包装元素，只需将组件布局替换为标签，从而产生以下结构：

<button>
  <span>
    My Text
  </span>
</button>

我的文字

---

如果没有办法去除它们，你有什么建议？谢谢

角度组件是带有模板的指令：

指令配置@Directive（{property1:value1，…}）

选择器：'.cool按钮：非（a）'指定 在模板中标识此指令。支持的选择器 包括元素、[attribute]、.class和：not（）

因此，组件选择器也可以是属性选择器。在您的示例中，不要写以下内容：

parent.component.html:

<app-button>
  <app-text>
    My Text
  </app-text>
</app-button>

<button app-button>
    <span app-text>My Text</span>
</button>

app.component.html

<button app-button class="button-1">
    <span app-text>My Text</span>
</button>

<button app-button class="button-2">
    <span app-text>My Text</span>
</button>

我的文字
我的文字

---

这是我遇到的类似问题。我会提供我的解决方案，以防其他人有同样的问题

我的组件应该能够在其他组件中使用，或者作为

的路由使用。当我将选择器用作属性时，

[my component]

只要它在其他组件中使用，一切都能正常工作。但是当由

创建时，会自动创建

为了避免这一点，我们可以简单地<强>使用多个选择器< /强>，并考虑选择器可以组合。

考虑这一点：我希望我的组件使用属性

my component

，如果它应该由

创建，它应该被包装在

中。要实现这一点，只需使用：

@Component(
    selector: 'section[my-component], my-component',
    ...
)

如果在另一个标签中使用，结果将是：

<whatevertag my-component>
     ... component content ...
</whatertag>

... 组件内容。。。

如果用作路线：

<section my-component>
     ... component content ...
</section>

... 组件内容。。。

谢谢！这样做的问题是，我仍然会有一个不必要的

span

包装我的按钮。通过查看您的代码，我想我可以编写

，而不是将应用程序按钮的模板设置为

，但如果这样做，我将不得不在通用样式表中定义按钮样式，因为组件样式仅适用于模板，并且我无法从组件样式内部使用我的指令来定位按钮。嗯，我查过了。现在让我们假设我有两种类型的按钮

。按钮-1

有蓝色背景，按钮-2有红色背景。我想做的是使用2个选项向按钮组件添加

styles.css

。在app.layout中执行：

My Text

。我看到的问题是“.button-1”样式必须放在

app.component.css

中，而不能放在

button.component.css

中，因此我必须在每个使用按钮的视图中声明这些样式，因为这些样式是组件范围的。顺便问一下，您在那里添加的

ng容器是什么？添加模板时是否删除了虚拟组件？我认为这是解决我问题的有效方法。我将很快添加完整的响应！非常感谢你的帮助！这种方法的一个问题是破坏封装。您是否知道一种方法来保留它，并且仍然定义子组件中的所有样式？显然在这个问题上是开放的，但似乎被卡住了
@Component(
    selector: 'section[my-component], my-component',
    ...
)

<whatevertag my-component>
     ... component content ...
</whatertag>

<section my-component>
     ... component content ...
</section>