如何在Angular 2组件中分离移动端和桌面的模板和样式？

import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {
  isMobile: boolean;

  constructor(private breakpointObserver: BreakpointObserver) {
    this.breakpointObserver.observe([
      Breakpoints.Handset,
      Breakpoints.Tablet
    ]).subscribe(result => {
      this.isMobile = result.matches;
    });
  }
}

<!-- 移动端模板 -->
<ng-container *ngIf="isMobile">
  <h1>移动端模板</h1>
  <!-- 其他移动端特定的内容 -->
</ng-container>

<!-- 桌面端模板 -->
<ng-container *ngIf="!isMobile">
  <h1>桌面端模板</h1>
  <!-- 其他桌面端特定的内容 -->
</ng-container>

/* 移动端样式 */
@media screen and (max-width: 767px) {
  /* 移动端特定的样式 */
}

/* 桌面端样式 */
@media screen and (min-width: 768px) {
  /* 桌面端特定的样式 */
}