Question

当我进入首页时，我需要有页眉，页脚和首页新闻页面。因此，当我单击标题上的某个链接时，首页新闻页面已更改。我的路由现在看起来像这样：

const ROUTES: Routes = [
{
  path: '', component: HomeComponent, children: [
    { path: '/sign-up', component: SignUpComponent },
    { path: '/sign-in', component: SignInComponent },
  ]
},
{ path: '404', component: Page404Component },

{ path: '**', redirectTo: '404'},
];

在我的app.component的html中，我只有一个routing-outlet。我的首页看起来像这样：

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

将显示

页眉和页脚，并且当我单击链接时，将根据需要重新绘制内容。但是默认情况下，应该首选组件HomeNewsComponent，但我不知道该怎么做。我了解这应该在routing.module中完成。我以path: '', component: HomeNewsComponent的身份尝试过，但是后来我只显示了没有页眉和页脚的新闻。如果有人告诉我如何解决此问题，我将不胜感激。

Answer 1

我解决了我的问题，我应该这样写：

const ROUTES: Routes = [
{
path: '', component: HomeComponent, children: [
    { path: '', component: HomeNewsComponent },
    { path: 'sign-up', component: SignUpComponent },
    { path: 'sign-in', component: SignInComponent },
  ]
  },
  { path: PAGE_404, component: Page404Component },

  { path: '**', redirectTo: PAGE_404 },
];

谢谢所有回答！！！

Answer 2

应该在您的HomeComponent中，而不是您的应用程序组件中。

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

对于您的应用程序组件，您只需拥有家庭组件

<app-home></app-home>

如何在非主页上使用<router-outlet>更改内容？

2 个答案: