在Angular中,可以通过ActivatedRoute服务来获取URL参数。但是有时候,我们可能需要在没有访问URL参数的情况下跟踪显示的组件。以下是一种解决方法,使用一个共享服务来在组件之间传递当前组件的信息。
首先,创建一个共享服务,命名为ComponentTrackerService
,并在其中定义一个currentComponent
属性,用于存储当前显示的组件。
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class ComponentTrackerService {
currentComponent: string;
constructor() { }
}
接下来,在每个要跟踪的组件中导入和使用ComponentTrackerService
。在组件的构造函数中注入ComponentTrackerService
,并将当前组件的名称存储在currentComponent
属性中。
import { Component, OnInit } from '@angular/core';
import { ComponentTrackerService } from 'path/to/component-tracker.service';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
constructor(private componentTrackerService: ComponentTrackerService) { }
ngOnInit() {
this.componentTrackerService.currentComponent = 'MyComponent';
}
}
现在,你可以在任何地方访问ComponentTrackerService
的currentComponent
属性,以获取当前显示的组件的信息。
import { Component, OnInit } from '@angular/core';
import { ComponentTrackerService } from 'path/to/component-tracker.service';
@Component({
selector: 'app-another-component',
templateUrl: './another-component.component.html',
styleUrls: ['./another-component.component.css']
})
export class AnotherComponentComponent implements OnInit {
currentComponent: string;
constructor(private componentTrackerService: ComponentTrackerService) { }
ngOnInit() {
this.currentComponent = this.componentTrackerService.currentComponent;
}
}
在这个例子中,AnotherComponent
组件通过注入ComponentTrackerService
来获取currentComponent
的值,并将其存储在currentComponent
属性中。
这样,你就可以在没有访问URL参数的情况下跟踪显示的组件了。