2016-06-22 12 views
0

角度2のRC1バージョンで作業していました。コンポーネント(A)から同じコンポーネント(A)にナビゲートできますが、コンポーネントを再利用するために角を付けることはできません(完全なナビゲーション履歴を達成する)。Angular 2 RC2でコンポーネントの再利用を停止する方法 "2.0.0-rc.2(2016-06-15)"

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()機能によってトリガーされます。だから、私は何をするために使用することは、私のコンポーネントとreturn falseCanReuseを実装しました。

ブートストラップで使用される経路は、以下のとおりです。

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

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

私はRC2に更新されているので、これは適用されません長いように見えますし、私が困っ新しい新で同じことを行う方法を見つけることがあります角度ルータimport { Router } from '@angular/router';

誰でもアイデアはありますか?

+0

よう

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

RouterConfigのようなもので、どのように新しいルータに移動しますか? –

+0

こんにちは@GünterZöchbauer私は完全なコンポーネントコードを含めるために自分の投稿を編集しました。 –

答えて

1

私はcanReuseを得るまで、私はダミーのリダイレクトコンポーネントを使用して、目的のコンポーネントにリダイレクトします。

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)) 
    } 
} 

とリンク、それは完全な履歴を維持しないように

export const routes: RouterConfig = [ 
{ 
    path: 'redirect', 
    children: [ 
    { 
     path: '**', 
     component: RedirectComponent 
    } 
    ] 
}, 
関連する問題