当我们返回到Web组件时，将角web组件路由路由到最后一个组件

Question

我们已经构建了一个具有角元素的web组件，并在父角应用程序中使用。

但问题似乎在于web组件的路由。

上一次加载的组件似乎与当前的url无关。

​

​

​

​

​

​

现在转到另一条路由，然后返回到web组件。

|
|
V

​

​

最后一个图像显示，当url没有指向路由一时，路由一仍然在加载。

有没有人对如何处理这个场景有任何想法。

链接到项目

------------------------------------EDIT------------------------------------

Web组件代码：

基本构成部分：

@Component({
  selector: 'app-route-comp',
  template: `<div>
      <ul>
        <li><a [routerLink]="['/base']">Base</a></li>
        <li><a [routerLink]="['/base', 'r1']">R1</a></li>
        <li><a [routerLink]="['/base', 'r2']">R2</a></li>
        <li><a [routerLink]="['/base', 'r3']">R3</a></li>
      </ul>
    </div>
    <router-outlet (activate)="onActivate($event)"></router-outlet>`,
})
export class RouteCompComponent implements OnInit, OnDestroy {
  constructor(private router: Router) {}

  ngOnInit(): void {}

  onActivate(event: Component) {
    console.log(event);
  }

  ngOnDestroy() {}
}

第一条路线：

@Component({
  selector: 'app-route-one',
  template: '<p>route-one works!</p>',
})
export class RouteOneComponent {}

app组件：

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>',
})
export class AppComponent implements OnInit, OnDestroy {
  constructor(private router: Router) {}
  ngOnInit() {
    console.log('hello');
    this.router.initialNavigation();
  }

  ngOnDestroy() {}
}

路线：

const routes: Routes = [
  {
    path: 'base',
    component: RouteCompComponent,
    children: [
      {
        path: 'r1',
        component: RouteOneComponent,
      },
      {
        path: 'r2',
        component: RouteTwoComponent,
      },
      {
        path: 'r3',
        component: RouteThreeComponent,
      },
    ],
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

应用程序模块：

@NgModule({
  declarations: [
    AppComponent,
    RouteCompComponent,
    RouteOneComponent,
    RouteTwoComponent,
    RouteThreeComponent,
  ],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
})
export class AppModule {
  constructor(private injector: Injector) {}
  ngDoBootstrap() {
    const { injector } = this;

    const routeCompWC = createCustomElement(AppComponent, { injector });
    customElements.define('wc-1', routeCompWC);
  }
}

消费应用：

app组件：

@Component({
  selector: 'app-root',
  template: `<a routerLink="/base">base route</a>
    &nbsp;&nbsp;
    <a routerLink="/alt">alt route</a>

    <router-outlet></router-outlet>`,
})
export class AppComponent {}

路线：

const routes: Routes = [
  {
    path: 'base',
    component: OuterRouteComponent,
    children: [{ path: '**', component: OuterRouteComponent }],
  },
  {
    path: 'alt',
    component: OuterRouteTwoComponent,
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

外部构成部分：

@Component({
  selector: 'app-outer-route',
  template: '<div #wc></div>',
})
export class OuterRouteComponent implements AfterViewInit {
  @ViewChild('wc') wc!: ElementRef<HTMLDivElement>;

  ngAfterViewInit() {
    const wc1El = document.createElement('wc-1') as NgElement &
      WithProperties<any>;

    this.wc.nativeElement.appendChild(wc1El);
  }
}

外部两个组成部分：

@Component({
  selector: 'app-outter-route-two',
  template: '<p>outer-route-two works!</p>',
})
export class OuterRouteTwoComponent {}

我相信这能行。

Answer 1

在努力解决这个问题之后，想出一个解决办法。

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>',
})
export class AppComponent implements OnInit, OnDestroy {
  constructor(
    private router: Router,
    @Inject(DOCUMENT) private document: Document
  ) {}
  ngOnInit() {
    const fullHash = this.document.defaultView?.location.hash.substring(1);
    if (this.router.url !== '/' && this.router.url !== fullHash) {
      const hashSplit = fullHash?.split('?');
      const queryParams =
        hashSplit?.length && hashSplit?.length > 1
          ? hashSplit[1]
              .split('&')
              .map((ele) => ele.split('='))
              .reduce(
                (reduced: object, ele) => ({
                  ...reduced,
                  [ele[0]]: ele[1] ?? '',
                }),
                {}
              )
          : {};
      hashSplit?.length &&
        this.router.navigate([hashSplit[0]], {
          queryParams,
        });
    }
    this.router.initialNavigation();
  }
}