Angular2 route, включая идентификатор

Question

В проекте 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 напрямую доступен из внешней ссылки.

я могу получить UUID от project.component.ts, но как передать его элемент 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); 
}