使用Angular 4 Material分隔md-tab-header和tab body

Question

我尝试将有关Angular Material的标签组件的md-tab-header和实际内容正文分开。这背后的原因是因为我希望标题位于与主体本身不同的容器中，具有单独的样式。到目前为止，这是我的代码：

<div id="tabs-header-container">
        <md-tab-group md-stretch-tabs="always" (selectChange)="onLinkClick($event)">
            <md-tab class="uk-width-1-2">
                <ng-template md-tab-label>
                    <i class="fa fa-comments" aria-hidden="true"></i>
                </ng-template>
                <p>Chat body, this should have its own container</p>
            </md-tab>
            <md-tab class="uk-width-1-2">
                <ng-template md-tab-label>
                    <i class="fa fa-user-plus" aria-hidden="true"></i>
                </ng-template>
                <p>Referral body, this should have its own container</p>
            </md-tab>
          </md-tab-group>
    </div>

非常感谢任何帮助！