按下链接时如何销毁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.我有 2 个链接，即 Home 和 Hello。 2.在home链接的输入框中输入一些数据，切换到Hello链接，返回home链接。 3.您输入的文字仍然存在。 4.我想在单击链接时加载新组件... 我不知道如何销毁angular2路由器中的组件...请帮助朋友...提前谢谢

Answer 1

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

查看onInit。