如何在AngularDart Material展开面板标题中使用自定义HTML与样式

想要在展开面板标题里加material-chip、按钮这类自定义元素，不用局限于name输入属性，直接通过自定义<header>投影内容就能实现，具体步骤如下：

• 放弃使用name输入，直接在material-expansion-panel内部嵌套<header>标签，在里面编写任意需要的HTML内容，包括material-chip、按钮等：

  <material-expansion-panel>
    <header>
      <span class="panel-title">Ordinary Panel</span>
      <material-chip>标签示例</material-chip>
      <material-button (trigger)="handlePanelAction()">操作按钮</material-button>
    </header>
    <!-- 面板展开内容 -->
    <div>
      这是面板展开后显示的内容区域
    </div>
  </material-expansion-panel>
  

• 自定义样式：直接在组件CSS中调整标题内元素的样式即可，无需依赖::ng-deep（如果需要覆盖组件默认样式也可以用）：

  header .panel-title {
    font-weight: bold;
    font-size: 18px;
    margin-right: 12px; /* 和chip拉开间距 */
  }
  
  material-chip {
    margin-right: 8px;
  }
  

补充说明：

• 你之前用<div action>是给面板添加右侧独立操作按钮的写法，它不属于标题区域，所以放在header里不会生效；
• 自定义header后，组件默认的展开/折叠图标会自动保留在标题最右侧，无需额外处理。

内容的提问来源于stack exchange，提问作者Ted