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

Question

我正在尝试为 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，但不会更改显示的路由器输出。

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

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

Which architecture for a an Angular side menu?

navigateurl

angular

angular-routerlink