Question

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

框架组件HTML

+0.0333f

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

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

这是行不通的，因为它是未定义的，但是如果我在其他组件中执行它，它将起作用。我认为这是因为FRAMEWORK组件未在路由器中定义，因此该组件没有URL。

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

Answer 1

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

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

共享服务

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

Nav comp

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

Answer 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

从嵌套组件获取url参数

2 个答案: