如何用另一个html替换整个html（2）

应用程序组件.ts

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

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

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

 loadNewPage() {
    this.router.navigate(['/newPage']);
  }

body.component.ts

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

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

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

 loadNewPage() {
    this.router.navigate(['/newPage']);
  }

因此，页面加载内容头+正文，但现在我想路由到另一个页面，并用新页面替换整个现有页面。我该怎么做

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

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

我想在单击按钮时使用此按钮，以重定向到此页面并替换现有的

和

这是否可行

如果我只使用下面的代码，我仍然可以看到当前的

和

---

结果为我提供了当前页面。。。。因为我没有把内容集中在一起，所以不适用。我想用NewComponent.ts中的newpage.html替换head.html和body.html。您需要在应用程序组件中放置一个

，并将当前应用程序组件中的内容移动到新组件中。然后将您的路线更新到：

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

---

您将希望在应用程序组件中放置

，并将当前应用程序组件中的内容移动到新组件中。然后将您的路线更新到：

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

---

您需要用路由器出口组件替换AppComponent中的内容，并将替换的内容移动到新组件（如HomeComponent）。在默认路由中使用HomeComponent，以便在您最初访问站点时加载它

最好是查看文档，因为这在Angular中是一个非常基本的主题，在您走得太远之前，您应该了解很多细节

App.component.html

 <router-outlet></router-outlet>

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

---

您需要用路由器出口组件替换AppComponent中的内容，并将替换的内容移动到新组件（如HomeComponent）。在默认路由中使用HomeComponent，以便在您最初访问站点时加载它

最好是查看文档，因为这在Angular中是一个非常基本的主题，在您走得太远之前，您应该了解很多细节

App.component.html

 <router-outlet></router-outlet>

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

---

NewcomComponent的内容是什么？对于测试，我只使用Hello World

就是您需要的！它不会打印它，但url会更改。建议使用路由器出口。介绍了NewcomComponent的内容是什么？对于测试，我只使用Hello World

就是您需要的！它不会打印它，但url会更改。建议使用路由器出口。描述于