首页 文章

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

提问于
浏览
1

朋友你好我有一个带有两个链接的angular2路由器,其中一个包含一个输入框,另一个包含普通文本 . 当我将数据输入到输入框并在路由器链接之间切换时,如果我返回包含输入框的链接,则输入的文本输入字段仍然存在 . 我想在我返回链接时销毁组件并重新初始化组件 . 这是我的代码Link- 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.将一些数据输入到归属链接中的输入框,切换到Hello链接并返回到主链接 . 你输入的文字仍然存在 . 4.我想在点击链接时加载新组件...我不知道如何破坏angular2路由器中的组件...请帮助朋友...提前感谢

1 回答

  • 0

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

    看看onInit .

相关问题