Angular 侧边菜单的架构是什么？答案

【问题标题】：Which architecture for a an Angular side menu?Angular 侧边菜单的架构是什么？
【发布时间】：2019-11-20 00:10:13
【问题描述】：

我正在尝试为 Angular 项目制作侧边菜单。我从 firebase 检索数据，但我不知道我的架构是否正确。

我已经使用选择器 app-serie-list 制作了一个组件：

<li routerLinkActive="active" *ngFor="let serie of series; let i = index">
      <a routerLink="series/view/{{i}}">{{serie.title}}-{{i}}</a>
</li>

我已经像这样集成到 app.component.html 中：

<app-header></app-header>
<div class="row">
  <div class="col-sm-2">
    <app-serie-list></app-serie-list>
  </div>
  <div class="col-sm-10">
    <div class="container">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

此时我不知道我的 app-serie-list 组件是否在正确的位置。我必须把它放在路由器插座中发生的组件中吗？

当显示 app-serie-list 组件时，它会更改我的网络浏览器的 url，但不会更改显示的 router-outled。

【问题讨论】：

您似乎没有在 app.routes 文件中添加路由，您在控制台中是否有任何错误？
你有一个可重复的例子让我们看看吗？
我没有向 app.routes 文件添加路由，但我声明了一个常量“appRoutes: Routes”：{ path: 'series/view/:id', component:单系列组件},。数据来自数据库，因此它们是动态的。我的控制台中没有任何错误，但我的 SerieListComponent 中的 ngOnInit 方法没有被调用。我不明白您所说的可重现示例是什么意思。
答案是，如果您希望每条路线都有一个侧边菜单，则取决于您想要实现的目标，但如果您希望为不同的路线设置不同的布局，您可以想要有一些中间布局组件，您可以在不同的地方添加这个 app-serie-list，例如 stackblitz.com/edit/angular-layouting
我希望每条路线都有一个侧面菜单。我会检查你的 sn-p 以找出我的代码中可能出现的问题。

标签： angular navigateurl angular-routerlink

【解决方案1】：

正如 Xesenix 所说，我的架构很好。我的错误是在SingleSerieComponent，由routerlink显示的组件。

我已经订阅了 ngOnInit 方法中的代码。所以我的 SingleSerieComponent 看起来像：

@Component({
  selector: 'app-single-serie',
  templateUrl: './single-serie.component.html',
  styleUrls: ['./single-serie.component.scss']
})
export class SingleSerieComponent implements OnInit {

  serie: Serie;
  series: Serie[];
  serieSubscription: Subscription;

  constructor(private route: ActivatedRoute, private serieService: SeriesService,
              private router: Router) { 

    route.params.subscribe(val => {
      this.serie = new Serie(''); // on definit par defaut : chaine vide, 0 et chaine vide
      const id = this.route.snapshot.params['id'];
      console.log("id :");
      console.log(id);
      this.serieService.getSingleSerie(+id).then(
        (serie: Serie) => {
          this.serie = serie;
        }
      );
    });
  }

  ngOnInit() {
    console.log("SingleSerieComponent-ngOnInit");

    this.serie = new Serie(''); // on definit par defaut : chaine vide, 0 et chaine vide
    const id = this.route.snapshot.params['id'];
    console.log("id :");
    console.log(id);
    this.serieService.getSingleSerie(+id).then(
      (serie: Serie) => {
        this.serie = serie;
      }
    );

  }

  onBack(){
    this.router.navigate(['/pops']);
  }

  ngOnDestroy(){
    console.log("SingleSerieComponent-ngOnDestroy");
  }
}

【讨论】：