无法使用路由器插座绑定输入变量 - Angular

如何解决无法使用路由器插座绑定输入变量 - Angular

我知道以前有人问过这个问题，但我在这里很困惑，而且是 Angular 的新手，所以可以解释一下。

我有我的打印组件、列表组件和详细信息组件。打印组件订阅一个 observable 来检索我的后端数据。

export class PrintsComponent implements OnInit {
public items: Item[];
  constructor(private printServ: BackendDataService) { }

  ngOnInit(): void {
    this.printServ.getPrints().subscribe( 
      (printData: Item[]) => {
        this.items = printData;
 
    }),(error: HttpErrorResponse) =>{
      alert(error);
    }
  }
}

然后我可以通过输入变量将此数据传递给我的打印列表组件

In Prints.html
 <app-prints-list [listItems]="items"></app-prints-list>

export class PrintsListComponent implements OnChanges {
 @Input('listItems')items: Item[];  //+ constructor etc 

但是在尝试动态更改我的详细信息显示时会出现问题。我订阅 Params Observable 以检索列表中每个项目的 URL id，然后尝试在详细信息组件中显示它。下面是一张图片，只是为了澄清我想要的最终结果的意图

这需要我使用路由器插座，因此无法将检索到的数据绑定到我的输入变量

PrintList.component.html
<br>
<div class="row" style="margin-bottom: 15px; margin-left: 1px;">
    <div class="col-xs-4">
        <app-print-item *ngFor="let itemEl of items; let i = index" 
        [printItem]="itemEl"
        [index]="i" ></app-print-item> 
    </div>
    <div class="col-xs-8">
      <router-outlet></router-outlet> *****displaying details component here***
    </div>
</div>

PrintDetails.component.ts

  items: Item[]; ** Need to assign my data to this variable!
  item: Item;
  constructor(private activeRoute: ActivatedRoute,) { }
 
  ngOnInit(): void {
    this.activeRoute.params.subscribe(
      (params: Params) => {
        this.id = +params['id'];
        this.initialiseVariableDefaults();
      }
    )  
  }

后端服务

export class BackendDataService {
  public apiServiceUrl = environment.apiBaseUrl;
  constructor(private http: HttpClient ) { }

  public getPrints(): Observable<any> {
    return this.http.get<Item[]>(`${this.apiServiceUrl}/item/all`);
  }

我如何修改我的服务，以便它可以存储返回的数据并在这两个组件之间共享（DB 返回一个数组对象）我曾尝试使用 Subject/ReplaySubjects 来分配变量，但无法弄清楚，谢谢你的帮助！