从嵌套组件中获取 url 参数

Question

我开发了一个 MEAN 堆栈应用程序，我使用 Angular 作为前端。在 angular 中，我使用了导航栏和侧导航栏，它们是我的布局框架。然后路由显示在 mat-sidenav-content -> ng-content 这里：

框架组件HTML

  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    MY CONTENT NAVBAR
  </nav>

  <mat-sidenav-container class="sidenav-container">
    <mat-sidenav>
    MY CONTENT SIDENAV
    </mat-sidenav>

    <mat-sidenav-content style="background-color: #ecf0f1">
      <ng-content></ng-content>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

其他组件显示正常。但是，我想像这样从框架组件访问 url：

       import { ActivatedRoute } from "@angular/router";
[...]
        constructor(private route: ActivatedRoute) {}
[...]
        this.route.snapshot.params["id"]

它不起作用，因为它是未定义的，而如果我在其他组件中这样做，它就可以工作。我认为这是因为 FRAMEWORK 组件未在路由器中定义，因此该组件没有 URL。

我尝试使用共享数据服务。像这样我在其他组件中设置了 id 值，框架组件可以使用它。但它不起作用，因为框架组件在其他组件之前加载。

Answer 1

我只是通过属性将 id 传递给嵌套组件而不是所有这些.. 但是如果您明确需要使用 ActivatedRoute 获取参数，您可以这样做：

在您的 app-routing.module 上，您可以在嵌套组件的 'children' 数组中指定嵌套组件。

const routes: Routes = [
  ...
  {
    path: 'somepath/:id',
    component: SuperComponent,
    children: [
      {path: '', redirectTo: ''}, 
      {path: 'tailpath', component: NestedComponent}, 
    ]
  },
  ... 
];

在您的模板上

< nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    MY CONTENT NAVBAR
</nav>
...
<router-outlet></router-outlet>
...

嵌套组件将呈现在 router-outlet 元素上，您可以在其中使用 ActivatedRoute 并获取 id 参数。

了解更多信息go here

Answer 2

您可以 subscribe 在加载的组件中路由更改事件。然后从那里更新 id 服务。因此，主要 nav 组件将在从 service.

发出后接收更新后的 id

并且您应该使您的服务 singleton，以便每个 component 共享相同的 Service 实例。为此，您应该 provide 达到 module 级别的服务。

共享服务

class Service {
   emitData(id){
      this.sub.next(id)
   }
}

导航布局

class NavComponent {
       ngOnInit(){
          this.service.sub.subscribe(id => console.log(id));
       }
}

路由补偿

class NavComponent {
       ngOnInit(){
        this.router.events.subscribe((event) =>
        {
          if(event instanceOf NavigationEnd) { 
             // fetch id from url and call service method to emit data
              this.service.emitData(id);
          }
       });
 }

从嵌套组件中获取 url 参数

Get the url param from nested component

angular

angular-lifecycle-hooks