在混合模式下使用来自 Angular 个组件的路由

Question

我在混合模式下使用 AngularJS 1.5 和 Angular 7。如何更改 Angular 组件中的 url？我试过按如下方式访问当前 url：

constructor(private router: Router, private route: ActivatedRoute) {
    console.log(this.route.snapshot.queryParams);

}

查询参数始终为空。在父 AngularJS 组件中，我使用 $location 服务获取查询参数。如果我尝试使用路由器更改路由，它会显示无效路由。如何更改 Angular 组件中的当前 url？目前我正在发出一个事件，该事件又被可以使用 $location 服务的父 AngularJS 组件获取。

Answer 1

使用以下方式获取查询参数：

constructor(private router: Router, private route: ActivatedRoute) {
    this.route.queryParams.subscribe(params => {
     console.log(params);
   });
}

导航到其他 url （如您指定的，即更改 url ）然后使用：

this.router.navigate(['/someurl']);

Answer 2

我通过升级 AngularJS $location 服务成功做到了：

@Injectable()
export class LocationService {

    search(queryParameter?: string, value?: string): string | any {
        return undefined;
    }
}

在 AppModule 中执行以下操作

{provide: LocationService, useFactory: (i: any) => i.get('$location'), deps: ['$injector']},

在混合模式下使用来自 Angular 个组件的路由

Use routing from Angular Components in Hybrid mode

routing

hybrid

angularjs

angular