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在控制台中打印为未定义，因为此路由可直接从外部链接访问。

我可以从UUID获取project.component.ts但是如何将其传递到导航栏中的 routerLink 元素，该元素位于app.component？< / p>

使用评论解决方案：

我尝试使用[routerLink]="['/project', {uuid: uuid}]"，但生成的链接网址是：/＃/ think; uuid = undefined

感谢您的帮助。

Answer 1

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

您可以这样添加全局变量：

1）创建一个新的服务（让我们称之为＆＃34; SharedService＆＃34;），你保留全局变量（你也应该）在那里为它赋值，以便初始化它。您还可以在那里保留更多全局变量。

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 导入到您想要使用全局变量的所有组件中，并将 service 添加到每个组件的构造函数中：

set.component.ts：

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

get.component.ts：

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

Angular2路线包括id

1 个答案: