Question

我在Angular2中遇到路由问题，路由会创建一个新对象并保留旧对象。

我的导航栏和[主页]按钮位于AppComponent中。

.. app.html
<a class="navbar-brand" [routerLink]="['Auth']">Home</a>
<router-outlet></router-outlet>
..

路由器在开始时默认为AuthComponent。

.. app.component.ts
@RouteConfig([
  { path: '/', as: 'Auth', component: AuthComponent, useAsDefault: true }
])
..

我将通过在AuthComponent的构造函数中记录消息来演示该场景。

.. auth.component.ts
constructor(private _router: Router) {
    console.log("Constructing AuthComponent");
    this.router = _router;
}
..

单击“主页”按钮的响应将在每次单击时生成Constructing AuthComponent，从而创建新对象。（我可以确认旧对象仍然存在）

我希望能够路由到某个地方，然后返回到AuthComponent，同时仍然可以访问我之前设置的数据。

请参阅此plunker。

~~我目前正在使用2.0.0-beta.7~~ 更新为2.0.0.beta.9

Answer 1

您可以使用组件上的CanReuse接口及其routerCanReuse方法。这样，如果此方法返回true，则将在路由中使用该组件的相同实例：

@Component({
  (...)
})
class SomeComponent implements CanReuse {
  constructor(params: RouteParams) {

  }

  routerCanReuse(next: ComponentInstruction, prev: ComponentInstruction) {
    return true;
  }
}

有关详细信息，请参阅此链接：

https://angular.io/docs/ts/latest/api/router/CanReuse-interface.html

Navbar的Angular2路由（AppComponent）

1 个答案: