从嵌套组件中获取 url 参数

Posted 2023-03-13

【中文标题】从嵌套组件中获取 url 参数

【英文标题】：Get the url param from nested component

【发布时间】：2018-12-23 03:29:05

【问题描述】：

我开发了一个 MEAN 堆栈应用程序，我使用 Angular 作为前端。 在 Angular 中，我使用导航栏和侧导航栏，它们是我的布局框架。然后路由显示在 ma​​t-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 值，框架组件可以使用它。但它不起作用，因为框架组件是在其他组件之前加载的。

【问题讨论】：

您是否尝试过使用Subject 从Service 发出id，以便framework 组件将订阅它并在发出时接收值。

并且您将无法通过ActivatedRoute 在framework 组件中访问id。因为那不是在路由更改时加载的组件。服务会是更好的选择。

是的，我使用了一个 BehaviorSubject。问题是，如果我直接在 URL 中写入路由，则 id 不会更新。我需要重新加载页面。因为更新它的唯一解决方案是在其他组件中

为什么需要重新加载页面，在url中更改id后，直接点击return (Enter)。它应该加载组件并调用服务方法来发出 id。

事实上，如果我更改 URL 中的 id，路由组件会显示正确的数据，但主导航不知道未定义的 id。因为主导航是在路由组件之前加载的

【参考方案1】：

您可以subscribe 在被加载的组件中路由更改事件。然后从那里更新服务的id。这样主nav 组件将在service 发出更新后的id。

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

共享服务

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);
          
       );
 

【参考方案2】：

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

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

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

【讨论】：

这行不通，因为我需要主导航中的 id 并且可以从 router-outler 访问 id，我需要在导航中使用它

你 100% 确定你在说什么吗？ id 参数应该可以通过两个组件访问，它们都在同一路径下呈现。

使用子路径时，主导航不会在路由器路径中。所以它无法访问 id

因为我有这条路径：localhost:4200/home 或 localhost:4200/experiment/:id 或 localhost:4200/signin。在每种情况下都有导航栏，并且没有为所有导航栏定义 id