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

Question

我3天前开始学习角度,所以我很陌生.我还使用angularJS和React开发应用程序,我想我不明白角度5组件是如何完全工作的.如果我创建一个自定义文本的自定义按钮(我不是说这应该以这种方式完成,但这是一个显示我的观点的简单示例),如下所示:

<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>

如果没有办法删除它们你的建议是什么？谢谢!

Answer 1

角组件是带有模板的指令。据此：

指令配置@Directive（{property1：value1，...}）

选择器：'.cool-button：not（a）'指定在模板中标识此伪指令的CSS选择器。受支持的选择器包括元素，[属性] 、. class和：not（）。

因此组件选择器也可以是属性选择器。对于您的示例，而不是编写此代码：

parent.component.html：

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

写这个：

parent.component.html：

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

在哪里：

app-button.component.ts

...  
  selector: '[app-button]',
  template: `<ng-content></ng-content>
...

app-text.component.ts

...
  selector: '[app-text]',
  template: `<ng-content></ng-content>`
...

这将按照您的预期进行渲染：

在您对这些按钮的样式发表评论后进行更新：

要从按钮组件内部设置按钮样式并在父组件中设置类，请使用:host-context伪类。它没有描述，效果很好

button.component.css

  :host-context(.button-1)  {
    background: red;
  }
  :host-context(.button-2)  {
      background: blue;
  }

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>

这是演示