2016-11-15 193 views
1

我有這樣角2路由器鏈路與多個參數

path: 'projects/:id/settings' 

在我header.component.html的路線我想有一個鏈接到這個網頁

<a routerLink="['projects', progectId,'settings']" routerLinkActive="active">cool link</a> 

我有一個project.component,當我點擊某個項目時,我會進入項目頁面。然後我需要有可能去projects/:id/settings或其他類似的路線。

如何從projects.component傳遞progectId變量?
或者,也許有人知道另一種方式來實現這一點。

回答

4

我有同樣的問題對於這種route你應該使用routerLink這樣的:

<a routerLink="/projects/{{progectId}}/settings" routerLinkActive="active">cool link</a> 

,改變你的route pathrouting module這樣的:

{ path: ':id/settings', component: YourComponent} 

額外的信息來獲得projectId您應該按照下列步驟操作:

  1. 在您的component constructor中注射ActivatedRouteobject
  2. 在您的component中定義一個名爲projectIdvariable
  3. 獲取params通過activatedRouteobjectngOnInit()方法。
  4. 最後,你應該getprojectIdhtml這樣的:{{projectId}}

    import {Router, ActivatedRoute, Params} from '@angular/router'; 
    
    @Component({ 
        selector: 'app-your-component', 
        templateUrl: './your-component.component.html', 
        styleUrls: ['./your-component.component.css'] 
    }) 
    
    export class YourComponent implements OnInit { 
    
        private projectId: string; 
    
        constructor(private activatedRoute: ActivatedRoute) {} 
    
        ngOnInit() { 
        this.activatedRoute.params.subscribe((params: Params) => { 
        this.projectId = params['id']; 
        }); 
    }} 
    
0

我一般這樣做的組件類這樣

somefunctionName() { 
    let link = ['/summary', this.param1, this.param2]; 
    this.router.navigate(link); 
} 

然後調用從HTML代碼這樣

<a (click)="somefunctionName()"> 

在你的情況的功能,因爲我假設你是通過循環你的項目,你可以用這樣的參數調用你的函數

<a (click)="somefunctionName(pass the parameter here)"> 

然後改變函數定義來反映這一點。

+0

對不起,但也許喲不瞭解我。我知道如何建立一個鏈接。我問我怎麼能從另一個組件獲得一個:id參數?因爲我只在project.component中擁有它,但是想要在header.component中擁有它。 –

+0

對不起,我誤解了你的問題。我們可以請你看看你是如何調用你的HTML中的其他組件?根據這段代碼,這將是一個簡單的輸入變量或視圖子代的情況。 – TyAnthoney

+0

我解決了這個問題,通過創建一個服務來保存當前的項目,然後可以在任何地方使用它 –