如何销毁angular2路由器中的组件，并在按下链接时加载新组件

Question

朋友们，我有一个angular2路由器，有两个链接，一个包含输入框，另一个包含普通文本。当我在输入框中输入数据并在路由器链接之间切换时，如果我返回到包含输入框的链接，输入字段中输入的文本仍然存在。我想销毁该组件，并在返回链接时重新初始化该组件。这是我的代码链接-http://plnkr.co/edit/K90d2GeRegc4G0HjX0FW?p=preview

    import {bootstrap, bind, Component, View} from 'angular2/angular2'
import {RouteConfig, RouteParams, ROUTER_DIRECTIVES, APP_BASE_HREF, ROUTER_BINDINGS} from 'angular2/router'
@Component({
  selector: 'sup-cmp'
})
@View({
  template: `
    <div>
      <h2>Welcome World</h2>
    </div>
  `
})
class SupCmp {}
@Component({
  selector: 'home-cmp'
})
@View({
  template: `
    <div>
    <input type="text" />
    </div>
  `
})
class HomeCmp {}

@Component({
  selector: 'app-cmp'
})
@View({
  template: `
    <div>
      <h1>Hello {{message}}!</h1>
      <a [router-link]="['./HomeCmp']">home</a>
      <a [router-link]="['./HelloCmp', {name: 'brian'}]">hello</a>
      <hr>
      <router-outlet></router-outlet>
    </div>
  `,
  directives: ROUTER_DIRECTIVES
})
@RouteConfig([
  {path: '/', component: HomeCmp, as: 'HomeCmp'}
  {path: '/hello/:name', component: SupCmp, as: 'HelloCmp'}
])
export class App {
  message:string = 'world';
}
bootstrap(App, [
  ROUTER_BINDINGS,
  bind(APP_BASE_HREF).toValue(location.pathname)
]);
// In alpha-38:
//bootstrap(App, [routerBindings(App)]);

1.我有两个链接，即Home和Hello。2.在主页链接中的输入框中输入一些数据，然后切换到Hello链接并返回主页链接。3.你输入的文本仍然存在。4.我想在单击链接时加载新组件。。。我不知道如何破坏angular2路由器中的一个组件。。。请帮助朋友。。。提前感谢

Answer 1

您可以使用angulars生命周期事件来设置初始数据。

请查看单元。