从角度 7 中的 html 中删除外部组件标记答案

【问题标题】：Remove outer component tag from html in angular 7从角度 7 中的 html 中删除外部组件标记
【发布时间】：2020-04-16 18:37:25
【问题描述】：

有人提出了类似的问题，通常人们会建议对组件选择器进行更改。

在我的情况下，它不起作用。

这是场景：

我正在使用Angular Material 的Expansion panel 我希望面板中的每个单独项目都有一个组件：

@Component({
  selector: '[app-panel-item]',
  templateUrl: './panel-item.component.html',
  styleUrls: ['./panel-item.component.scss']
})
export class PanelItemComponent

<mat-expansion-panel>
  <mat-expansion-panel-header>
    <mat-panel-title>
      Title
    </mat-panel-title>
    <mat-panel-description>
      desc
    </mat-panel-description>
  </mat-expansion-panel-header>
     BODY
  <mat-action-row>
    <button mat-raised-button>Button</button>
  </mat-action-row>
</mat-expansion-panel>

问题是，使用<app-panel-item> 或<div app-panel-item> 会创建一个会打乱样式的外部html 标记。我尝试从指令中删除 <mat-expansion-panel> 并使用 <mat-expansion-panel app-panel-item> 但你不能同时拥有 2 个结构选择器。

预期布局：

实际结果：

我如何才能真正删除组件创建的外部标签？

编辑：Stackblitz

【问题讨论】：

你能提供最小的堆栈闪电战吗？
angular-ok9bzj.stackblitz.io stackblitz.com/edit/angular-ok9bzj
你说的是哪个外层标签？
包装组件内容的应用面板项。我更新了堆栈闪电战。前 3 行有我提到的这个包装标签，最后 3 行没有。
还是不明白，你的前3行和后3行看起来一模一样。

标签： angular

【解决方案1】：

如果问题只是border-radius，您可以将此样式添加到您的styles.css中

.mat-accordion app-panel-item .mat-expansion-panel:not(.mat-expanded), .mat-accordion app-panel-item .mat-expansion-panel:not(.mat-expansion-panel-spacing) {
    border-radius: 0;
}

.mat-accordion app-panel-item:first-of-type .mat-expansion-panel {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}

.mat-accordion app-panel-item:last-of-type .mat-expansion-panel {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

这是styles.css中的样式示例

https://stackblitz.com/edit/angular-3xmec5

组件.css

::ng-deep .mat-accordion app-panel-item .mat-expansion-panel:not(.mat-expanded),::ng-deep .mat-accordion app-panel-item .mat-expansion-panel:not(.mat-expansion-panel-spacing) {
    border-radius: 0; 
}

::ng-deep .mat-accordion app-panel-item:first-of-type .mat-expansion-panel {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}

::ng-deep .mat-accordion app-panel-item:last-of-type .mat-expansion-panel {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

使用 ::ng-deep 的 stackblitz 示例

https://stackblitz.com/edit/angular-39tbxt

【讨论】：

这将适用于全球。我认为使用ng::deep 更合适。
但另一方面，如果他使用带有PanelItemComponent组件的扩展面板，也许他需要全局。
这正是我喜欢的方式。由于组件和项目隔离，我更喜欢这个。
谢谢。有效。我对 ng::deep 不熟悉，但由于它有效，我接受你的回答。再次感谢您。
@Saita 也谢谢你，很高兴提供帮助。我也会用 ng::deep 来举例。