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

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

0 голосов
/ 10 июля 2019

Я пытаюсь сделать боковое меню для проекта 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 моего веб-браузера, но не меняет роутер-Outled отображается.

1 Ответ

0 голосов
/ 10 июля 2019

Так как Xesenix сказал, что моя архитектура хороша. Моя ошибка в SingleSerieComponent, компоненте, который отображается по ссылке router.

Я подписался на код в методе 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");
  }
}
...