角度2材质布局在不同的组件中渲染

Question

我正在使用Teradata Covalent布局

https://stackblitz.com/edit/covalent-contacts-template

我将此模板分解为多个组件，如页眉，页脚，侧边和主要内容布局，但当我将标题区域移动到标题组件时，它不会像浏览器和主要内容一样在浏览器上显示。一切都搞砸了。

这是实际的模板代码

<td-layout>
  <td-layout-nav>
    <div td-toolbar-content layout="row" layout-align="start center" flex>
      <button mat-icon-button class="td-menu-button" (click)="sidenav.toggle()" mdTooltip="Main menu">
        <mat-icon>menu</mat-icon>
      </button>
      <mat-icon class="mat-icon-logo" svgIcon="assets:covalent"></mat-icon>
      <span>Contacts</span>
      <span flex></span>
      <button mat-icon-button><mat-icon>apps</mat-icon></button>
      <button mat-icon-button><mat-icon>notifications</mat-icon></button>
      <button mat-icon-button><mat-icon>account_circle</mat-icon></button>
    </div>
    <mat-sidenav-container fullscreen>
      <mat-sidenav #sidenav mode="side" opened="true" style="width:257px;border-right:1px solid #ccc">
        <div flex class="mat-content bgc-grey-50">
          <mat-nav-list>
            <a mat-list-item class="active"><mat-icon matListIcon>contacts</mat-icon>Contacts</a>
            <a mat-list-item><mat-icon matListIcon>history</mat-icon>Frequently contacted</a>
            <a mat-list-item><mat-icon matListIcon>business</mat-icon>Directory</a>
            <a mat-list-item><mat-icon matListIcon>content_copy</mat-icon>Duplicates</a>
            <mat-divider></mat-divider>
            <a mat-list-item><mat-icon matListIcon>add</mat-icon>Create label</a>
            <mat-divider></mat-divider>
            <a mat-list-item><mat-icon matListIcon>settings</mat-icon>Settings</a>
            <a mat-list-item><mat-icon matListIcon>announcement</mat-icon>Send feedback</a>
            <a mat-list-item><mat-icon matListIcon>help</mat-icon>Help</a>
            <a mat-list-item><mat-icon matListIcon>exit_to_app</mat-icon>Go to the old version</a>
          </mat-nav-list>
        </div>
      </mat-sidenav>
      <!-- ng content or router would go here -->
      <div tdMediaToggle="gt-xs" [mediaClasses]="['push-md']">
        <mat-card>
          <mat-nav-list flex>
            <ng-template let-item let-i="index" let-last="last" ngFor [ngForOf]="[0,1,2,3,4,5,6,7,8,9]">
              <a mat-list-item (click)="openDialog()">
                <img matListAvatar src="https://api.adorable.io/avatars/285/{{i}}@adorable.io.png" />
                <h4 matLine class="cursor-pointer"> Firstname Lastname </h4>
                <span flex="100" class="mat-caption tc-grey-600">first.last@email.com</span>
                <button mat-icon-button matTooltip="Star contact"><mat-icon>star_outline</mat-icon></button>
                <button mat-icon-button matTooltip="Edit contact"><mat-icon>edit</mat-icon></button>
                <button mat-icon-button matTooltip="More actions"><mat-icon>more_vert</mat-icon></button>
              </a>
              <mat-divider *ngIf="!last" mat-inset></mat-divider>
            </ng-template>
          </mat-nav-list>
        </mat-card>
      </div>
    </mat-sidenav-container>
    <a mat-fab color="accent" matTooltip="Add new contact" matTooltipPosition="before" class="mat-fab-bottom-right z-3 fixed fab-pad">
      <mat-icon>add</mat-icon>
    </a>
  </td-layout-nav>
  <td-layout-footer>
    <div layout="row" layout-align="start center">
      <span class="mat-caption">Copyright &copy; 2017 Teradata. All rights reserved</span>
    </div>
  </td-layout-footer>
</td-layout>

如何将其分解为多个组件？