Какая архитектура для бокового меню Angular?

Я пытаюсь сделать боковое меню для проекта Angular. Я получаю данные из firebase, но не знаю, верна ли моя архитектура.

Я сделал компонент с селекторным списком приложений:

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

В настоящее время я не знаю, находится ли мой компонент списка приложений в нужном месте. Должен ли я поместить его в компонент, который находится в розетке маршрутизатора?

И когда отображается компонент списка приложений, он меняет URL-адрес моего веб-браузера, но не меняет отображаемый маршрутизатор.


angular navigateurl angular-routerlink
person Fred37b    schedule 10.07.2019    source источник
comment
Похоже, вы не добавили маршруты в файл app.routes, у вас есть ошибки в консоли?   -  person Michał Tkaczyk    schedule 10.07.2019
comment
У вас есть воспроизводимый пример, который мы могли бы изучить?   -  person SiddAjmera    schedule 10.07.2019
comment
У меня нет добавленных маршрутов в файл app.routes, но у меня есть константа appRoutes: Routes, где я объявил: {path: 'series/view/:id', component: SingleSerieComponent},. Данные поступают в базу данных, поэтому они являются динамическими. У меня нет никаких ошибок в моей консоли, но метод ngOnInit из моего SerieListComponent не вызывается. Я не понимаю, что вы подразумеваете под воспроизводимым примером.   -  person Fred37b    schedule 10.07.2019
comment
ответ будет зависеть от того, чего вы хотите достичь, если вам нужно одно боковое меню для каждого маршрута, оно может быть таким, как вы там, но если вы хотите иметь разную компоновку для разных маршрутов, вы можете захотеть иметь какой-то промежуточный компонент компоновки, где вы добавляете этот список приложений в разные места, проверьте это, например, stackblitz.com/edit/angular-layouting   -  person Xesenix    schedule 10.07.2019
comment
Я хочу однобоковое меню для каждого маршрута. Я проверю ваш фрагмент, чтобы найти, что может пойти не так в моем коде.   -  person Fred37b    schedule 10.07.2019

Ответы (1)


arrow_upward
0
arrow_downward

Так как 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");
  }
}
person Fred37b    schedule 10.07.2019