Angular - Как go на дочерний маршрут?

Question

В моем приложении Angular я определил маршруты:

const appRoutes = [
    { path: '', component: HomeComponent},
    { path: 'news', component: NewsComponent, children: [
        { path: ':id', component: NewsDetailComponent },
    ]},
    { path: '**', component: PageNotFoundComponent}
];

В моем файле NewsComponent ('/ news') html у меня есть * ngFor l oop для итерации и создания новостей :

<div class="news">
        <div class="row">
            <div class="col-sm-12 col-md-3" *ngFor="let n of news" (click)="goToNews(n.id)">
                <div class="single-news">
                    <img [src]="n.photoUrl" [alt]="n.headline">
                    <div class="news-content">
                        <h3>{{ n.headline }}</h3>
                        <p>{{ n.content }}</p>
                        <small>{{ n.author }}, {{ n.date | date }}</small>
                    </div>
                </div>
            </div>          
        </div>
    </div>

... и мой файл .ts:

goToNews(id: number) {
    this.router.navigate(['news', id]);
  }

Проблема в том, что когда я нажимаю на элемент, мой URL-адрес изменяется, но я остаюсь на том же компоненте, который я Я был за все время. Как мне перейти к NewsDetailComponent?

Answer 1

Когда у маршрута есть дочерние маршруты, компонент, на который указывает маршрут, должен иметь <router-outlet></router-outlet>. Это то, что Angular использует, чтобы определить, куда поместить компоненты из дочернего маршрута.

В качестве альтернативы, если ваша цель состоит в том, чтобы заменить экран верхнего уровня с помощью экрана сведений, вы могли бы реструктурировать свою схему маршрутизации следующим образом: следует добавить маршрут верхнего уровня для страницы сведений.

const appRoutes = [
    { path: '', component: HomeComponent},
    { path: 'news', component: NewsComponent},
    { path: 'news/:id', component: NewsDetailComponent },
    { path: '**', component: PageNotFoundComponent}
];

Answer 2

Вам нужно добавить элемент <router-outlet></router-outlet> в файл NewsComponent html, каждый дочерний компонент маршрута будет вставлен в элемент розетки маршрутизатора.