javascript - PrimeNG 从其他模块推送面包屑中的项目

Question

我尝试制作一个基于PrimeNG面包屑的面包屑。目前我有两个不同的模块。 在根应用程序中我有这个:

export class AppComponent implements OnInit {
    ngOnInit() {     
        this.items = [];       
        this.items.push({label:'Lists', url: '/lists'});      
    }
}

在app.component.html中:

<p-breadcrumb [model]="items"></p-breadcrumb>

这没问题!

但我想从其他模块推送数据，如下所示:

export class ListItemComponent implements OnInit {
...
   ngOnInit() { 
        let listId = this._activatedRoute.params['listId'];

        this.items = [];
        this.items.push({label: `Lists ${listId}`, url: `/lists/${listId}`}); 
    }
...
}

这不是出现，ListItemComponent无权访问。

知道如何解决这个问题吗？ 谢谢!

Answer 1

您可以通过共享服务解决此问题:

@Injectable()
export class BreadcrumbService {
    items: Array = [];
}

在顶级 AppComponent 模块中提供该服务。

现在您可以在AppComponent中使用它:

export class AppComponent implements OnInit {
    constructor(private _breadcrumbService: BreadcrumbService);

    ngOnInit() {     
        this._breadcrumbService.items.push({label:'Lists', url: '/lists'});      
    }
}

<p-breadcrumb [model]="_breadcrumbService.items"></p-breadcrumb>

还有另一个:

export class ListItemComponent implements OnInit {
    constructor(private _breadcrumbService: BreadcrumbService);
...
    ngOnInit() { 
        let listId = this._activatedRoute.params['listId'];

        this._breadcrumbService.items.push({label: `Lists ${listId}`, url: `/lists/${listId}`}); 
    }
...
}