包括ID

Question

在Angular2项目Angular2路线，我努力使路由器正常工作。

在我们的应用程序，我们只有主网页，然后一个项目专用的网页。 例如，用户访问使用直接链接指向这些项目的页面

http:/ourwebsite.com/#/project/b288ba45-3b41-4862-9fed-7271245b9c29 

我想，在标题导航栏，创建指向即使用户进入家庭后，给定的组件链接。

例如：用户转到他的项目，然后单击Home，我希望链接See project能够将用户重定向到他以前的精确项目。

My Routes：

export const ROUTES: Routes = [ 
    { path: 'home', component: HomeComponent }, 
    { path: 'project/:uuid', component: ProjectComponent }, 
    { path: '', redirectTo: '/home', pathMatch: 'full' }, 
    { path: '**', component: PageNotFoundComponent } 
]; 

我app.component.html与导航标题：

<ul class="nav navbar-nav"> 
    <li><a [routerLink]="['/home']">Home</a></li> 
    <li><a [routerLink]="['/project', uuid]">See a project</a></li 
</ul> 

我想这在app.component.ts：

import { Component, ViewEncapsulation, OnInit, OnDestroy } from '@angular/core'; 
import { Router, ActivatedRoute, Params } from '@angular/router'; 
import { Observable, Subscription } from 'rxjs'; 
import 'rxjs/Rx'; 

@Component({ 
    selector: 'app-root', 
    encapsulation: ViewEncapsulation.None, 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements OnInit, OnDestroy { 
    uuid: string; 
    private subscription: Subscription; 

    constructor(private route: ActivatedRoute) {} 

    ngOnInit() { 
    this.subscription = this.route.params.subscribe(params => { 
     this.uuid = params['uuid']; 
     console.log('Route UUID', this.uuid); 
    }); 
    } 

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

但事实是UUID打印在控制台未定义为此路线e是从外部链接直接访问的。

我可以从project.component.ts的UUID但如何将它传递给我的导航栏的routerLink元素，它位于app.component？

使用的注释解决方案：

我试图用[routerLink]="['/project', {uuid: uuid}]"但产生链接网址是：/＃/想; UUID =未定义

感谢您的帮助。

Answer 1

如果您一次只需要保存一个链接，则可以将uuid保存为全局变量，然后在生成链接时使用它。

您可以添加一个全局变量是这样的：

1）创建一个新的服务（姑且称之为，你保持你的全局变量“SharedService”）（你也应该赋值给它在那里，以便它被初始化）。你也可以在那里保留更多的全局变量。

shared.service.ts：

import { Injectable } from '@angular/core'; 

@Injectable() 
export class SharedService { 
    public uuid: string = ''; 

    constructor() { } 

} 

2）进口SharedService您app.ts或app.module.ts（但它是在你的文件系统调用）和它在同一app.ts或app.module.ts文件添加到提供者：

providers: [SharedService] 

不添加SharedService到供应商任何其他成分，因为它会被重新初始化，并且你将与你的全局变量的几个实例结束时，你只希望有只是其中之一。

3）现在导入SharedService到所有你想用你的全局变量中，也添加组件服务到上述组件的构造函数：

set.component.ts：

constructor(private shared: SharedService) { 
    this.shared.uuid = 'test'; 
} 

get.component.ts：

constructor(private shared: SharedService) { 
    console.log(this.shared.uuid); 
}