在 angular 7 中从 html 中删除外部组件标记

Question

有人问过类似的问题，通常人们建议更改组件选择器。

在我的情况下，是行不通的。

这是场景：

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

@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

Answer 1

如果问题只是边界半径，您可以将此样式添加到您的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