如何将整个HTML替换为另一个HTML（角度2）

Question

app.component.ts

/emails

head.component.ts

<div>
<app-head></app-head>
<app-body></app-body>
</div>

body.component.ts

...
@Component({
  selector: 'app-head',
  templateUrl: './head.component.html',
  styleUrls: ['./head.component.scss'],
  providers: []
})
...

因此，这些页面的内容为head + body，但现在我想路由到其他页面，并用新页面替换整个现有页面。我该怎么办？

在我的app.module.ts中，我有以下内容...

...
@Component({
  selector: 'app-body',
  templateUrl: './body.component.html',
  styleUrls: ['./body.component.scss'],
  providers: []
})
...

我想在单击按钮后重定向到此页面并替换现有的const routes: Routes = [ { path: 'newPage', component: NewComponent} ] 和<app-head>来使用吗？

如果我仅在下面使用，我仍然会看到当前的<app-body>和<app-head>

<app-body>

body.component.ts

<button type="button" (click)="loadNewPage()" >

结果给出了当前页面...。由于我没有将内容集中在一起，因此并没有真正适用。我想用NewComponent.ts

中的newpage.html替换head.html和body.html。

Answer 1

您需要用路由器出口组件替换AppComponent中的内容，并将替换后的内容移至新组件，例如HomeComponent。在默认路径中使用HomeComponent，这样它将在您初次访问该站点时加载。

最好查看Routing & Navigation的文档，因为这是Angular中一个非常基本的主题，并且有很多详细信息需要您深入了解。

App.component.html

 <router-outlet></router-outlet>

home.component.html

 <div>
     <app-head></app-head>
     <app-body></app-body>
 </div>

app-routing.module.ts

const routes: Routes = [
  { path: '', component: HomeComponent }
  { path: 'newPage', component: NewComponent}
]

Answer 2

您将需要在应用程序组件中放置<router-outlet></router-outlet>并将当前应用程序组件中的内容移动到新组件中。然后将您的路线更新为：

const routes: Routes = [
  { path: '', component: TheStuffYouMovedComponent },
  { path: 'newPage', component: NewComponent }
]