在 NavigationExtras 中保留次辅助路由器出口的状态

Question

我有一个经典的主插座和一个辅助命名插座。 该辅助插座内部有一个子插座。

您可以在 Stackblitz here 中看到该结构。 所以，我有：

  <router-outlet></router-outlet>
  <router-outlet name="secondary"></router-outlet>

并且，在中学内：

    <router-outlet></router-outlet>

我想要的是将一些信息传递到二级子出口。当我这样做时，我可以使用 NavigationExtras 将信息传递给辅助：

this.router.navigate([{ outlets: { secondary: 'about' } }], {
  state: { data: 'My data level 1' },
});

但我需要在“关于”内的子出口中提供该信息，而不是在“关于”中。如果我这样做：

this.router.navigate([{ outlets: { secondary: 'about/subabout' } }], {
  state: { data: 'My data level 1' },
});

我看到了我的子关于页面，但我没有状态（状态保留在“关于”中，您可以在控制台窗口中看到它）。

您可以通过单击“关于2”菜单来查看它的工作情况。

有什么想法可以让这项工作成功吗？我知道我可以提供一项服务来共享信息，但如果存在带有状态的解决方案，将会更干净。

Answer 1

对于这个问题，我们可以使用装饰器

SkipSelf

。

这是一个依赖注入注入器，它会跳过当前组件上提供程序的实例并查找 DI 树，因此它会查找

about

组件。

我还使用

LocationStrategy

来获取状态，这可以单独用来解决这个问题，你不应该将它用于其他任何用途，因为它引用了父组件位置，而不是当前位置，因为装饰器。

import { LocationStrategy } from '@angular/common';
import { Component, OnInit, SkipSelf } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'page-subabout',
  templateUrl: './subabout.component.html',
})
export class SubaboutComponent implements OnInit {
  constructor(
    private router: Router,
    @SkipSelf() private location: LocationStrategy
  ) {
    console.log('sub about', this.router.getCurrentNavigation()?.extras?.state);
    console.log('sub about location', this.location.getState());
  }

  ngOnInit() {}
}

Stackblitz 演示