Angular 如何使用<；更改内容；路由器出口>；在非主页上？

我需要有页眉，页脚和主页新闻页，当我去我的主页。因此，当我点击标题上的某个链接时，主页上的新闻页面发生了变化。 我的路由现在如下所示：

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-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

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 },
];

在我的app.component的html中，我只有一个

路由出口

。 我的主页如下所示：

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-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

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 },
];

页眉和页脚会显示出来，当我点击链接时，内容会根据需要重新绘制。但是默认情况下，应该首选组件

HomeNewsComponent

，我不知道如何操作。 我知道这应该在routing.module中完成。我尝试了

路径：''，组件：HomeNewsComponent

，但是我只显示没有页眉和页脚的新闻。

---

如果有人告诉我如何解决这个问题，我将不胜感激。

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

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

对于你的应用程序组件，你可以只使用你的主组件

<app-home></app-home>

---

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

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-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

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 },
];

---

感谢所有回应的人

我不明白你的解释。如果希望HomeNewsComponent显示在路径

'

，那么为什么要将该路由配置为具有HomeComponent而不是HomeNewsComponent？当我写入

path:'时，组件：HomeNewsComponent

而不是

路径：“”，component:HomeComponent

显示新闻，但不显示页眉和页脚。我不知道如何实现这一点，因为它们位于应用程序组件模板中，并且始终显示该模板。您需要发布一个完整的最小示例，以stackblitz的形式再现该问题。我已将其添加到我的应用程序中。组件：

。my home.component看起来像这样：

。和my routing.module-

路径：''，组件：HomeNewsComponent，children…

。现在我看到了我的页眉、页脚和新闻，但当我单击页眉中的任何链接时，我不会重新绘制页面，尽管浏览器中的url地址会从你的应用程序组件中删除。我已从我的应用程序组件中删除，但没有帮助。它应该会起作用。读这个