1

我开发了一个 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 值，框架组件可以使用它。但它不起作用，因为框架组件是在其他组件之前加载的。

4

2 回答 2

1

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

你应该让你的服务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);
          }
       });
 }
于 2018-07-15T12:53:07.537 回答
0

我只是通过属性将 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 参数。

欲了解更多信息，请点击此处

于 2018-07-15T11:09:46.047 回答