Question

我想使用ActivatedRoute来获取服务中的路由参数，就像我在组件中一样。但是，当我在Service中注入ActivatedRoute对象时，它包含一个空的params变量

我创建了一个再现行为的plunker： http://plnkr.co/edit/sckmDYnpIlZUbqqB3gli

请注意，目的是使用服务中的参数而不是组件，plunker的设置方式纯粹是为了证明问题。

组件（export class Component implements OnInit { result: string; constructor(private route: ActivatedRoute) { } ngOnInit() { this.route.params.subscribe(params => { this.result = params['test']; }); } }已被检索）：

test

服务（export class Service { result: string; constructor(private route: ActivatedRoute) { this.getData(); } getData() { this.route.params.subscribe(params => { this.result = params['test']; }); } } 不检索）：

RefactoringContribution contribution = RefactoringCore.getRefactoringContribution(IJavaRefactorings.RENAME_COMPILATION_UNIT);
RenameJavaElementDescriptor descriptor = (RenameJavaElementDescriptor) contribution.createDescriptor();
descriptor.setProject(cu.getResource().getProject().getName());
descriptor.setNewName(newFileName);
descriptor.setJavaElement(cu);
descriptor.setUpdateReferences(true);
RefactoringStatus status = new RefactoringStatus();
try {
    RenameRefactoring refactoring = (RenameRefactoring) descriptor.createRefactoring(status);
    IProgressMonitor monitor = new NullProgressMonitor();
    RefactoringStatus status1 = refactoring.checkInitialConditions(monitor);
    if (!status1.hasFatalError()) {
        RefactoringStatus status2 = refactoring.checkFinalConditions(monitor);
        if (!status2.hasFatalError()) {
            Change change = refactoring.createChange(monitor);
            change.perform(monitor);
        }
    }
} catch (CoreException e) {
    e.printStackTrace();
} catch (Exception e) {
    e.printStackTrace();
}

Answer 1

Service这是一个属于根注入器的单例，注入了root ActivatedRoute instance。

奥特莱斯获得自己的注射器和own ActivatedRoute instance。

The solution here是让路由组件拥有自己的Service个实例：

@Component({
  ...
  providers: [Service]
})
export class MainComponent { ... }

Answer 2

当多个服务实例不是问题时，answer of estus提供了一个很好的解决方案。

以下解决方案直接从路由器获取参数，并允许服务具有一个实例：

export class Service {
  result: string;

  constructor(private router: Router) {
    this.result = router.routerState.snapshot.root.children[0].url[index].path
  }
}

或作为一个可观察的：

export class Service {
  result: string;

  constructor(private router: Router) {
    this.router.routerState.root.children[0].url.map((url) => {
      this.result = url[index].path;
    });
  }
}

或者，当routerState不可用时：

export class Service {
  result: string;

  constructor(private router: Router) {
    this.router.parseUrl(this.router.url).root.children.primary.segments[index].toString();
  }
}

索引是网址中param的位置。

Answer 3

我遇到了这个问题，最后的解决方法如下。

@Component({
  selector: 'app-sample',
  styleUrls: [`../sample.component.scss`],
  templateUrl: './sample.component.html',
})
export class AppSampleComponent {
  constructor(private route: ActivatedRoute,
              private someService: SomeService){}
  public callServiceAndProcessRoute(): void {
    this.someService.processRoute(route);
  }
}

@Injectable()
export class SomeService {
  public processRoute(route: ActivatedRoute): void {
  // do stuff with route
  }
}

因此，您将ActivatedRoute作为参数传递给服务。

Answer 4

我在您提供的Plunker代码中看不到routerLink指令。

您需要使用routerLink指令导航到您提供参数的组件，然后才能检索它。例如：

<a routerLink="/myparam" >Click here to go to main component</a>

Angular 2.0.2：ActivatedRoute在服务中为空

4 个答案: