在angular2中切换到新的路由时，如何清除视图中的所有内容？

import { CanDeactivate } from '@angular/router';

export interface CanComponentDeactivate {
  canDeactivate: () => boolean;
}

export class YourComponent implements CanComponentDeactivate {
  // ...

  canDeactivate() {
    // 清除视图的操作
    // ...

    return true; // 返回true表示可以切换到新的路由，返回false表示禁止切换
  }
}

import { Routes } from '@angular/router';
import { YourComponent } from './your-component';

export const routes: Routes = [
  {
    path: 'your-path',
    component: YourComponent,
    canDeactivate: [YourDeactivateGuard]
  },
  // ...
];

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { CanComponentDeactivate } from './your-component';

@Injectable()
export class YourDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(component: CanComponentDeactivate) {
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}