Question

我正在使用angular 2 RC1版本并实现了导航，其中我有嵌套结构，我可以从组件（A）导航到相同的组件（A）但不想角度重用组件（实现完整导航历史）。所以我以前要做的是在我的Component和CanReuse中实现return false：

import { Component, OnInit } from "@angular/core";
import { Router } from '@angular/router';
import { CanReuse } from "@angular/router-deprecated";

@Component({
    moduleId: module.id,
    selector: "myComponent",
    templateUrl: "myComponent.component.html"
})
export class MyComponent implements OnInit, CanReuse {
   private _sub: any;

   constructor(private _router: Router, private _route: ActivatedRoute) {

   }

   ngOnInit() {
       this._sub = this._router
        .routerState
        .queryParams
        .subscribe(params => {
            var parentTitle = params['id'];
            var tappedTitle = params['title'];
        });
   }

   ngOnDestroy() {
       this._sub.unsubscribe();
   }

   public onNavigationButtonTap(args) {
       this._router.navigate(['/myComponent'], { queryParams: { id: 1, title: "My title" } });
   }

   routerCanReuse(nextInstruction: any, prevInstruction: any): boolean {
        return false;
   }
}

导航由onNavigationButtonTap()功能触发。

Bootstrap使用的路线是：

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

const routes: RouterConfig = [
    { path: "/", redirectTo: "/myComponent", terminal: true },
    { path: "/myComponent", component: MyComponent }
];

自从我更新为 RC2 后，它似乎不再适用，而我在新的新角度路由器import { Router } from '@angular/router';

中找不到如何做同样的事情

任何人都有任何想法？

Answer 1

Until we get canReuse back, I'm using a dummy 'redirect' component that simply redirects to the desired component.

import { Component, OnInit } from '@angular/core'
import { Router, ActivatedRoute } from '@angular/router'

@Component({
  moduleId: module.id,
  selector: 'redirect',
  template: ``
})
export class RedirectComponent implements OnInit {
  constructor(private route: ActivatedRoute,
              private router: Router) { }

  ngOnInit() {
    let url = this.route.snapshot.url
    console.log('redirect', this.route.toString())
    this.router.navigate(url.map((seg) => seg.path))
  }
}

and the link is something like

 '/redirect/some/page/1/2'

RouterConfig like

export const routes: RouterConfig = [
{
  path: 'redirect',
  children: [
    {
      path: '**',
      component: RedirectComponent
    }
  ]
},

如何在Angular 2 RC2“2.0.0-rc.2（2016-06-15）”中停止重用组件

1 个答案: