Как заменить весь HTML другим HTML (Angular 2)

Question

app.component.ts

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

head.component.ts

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

body.component.ts

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

Таким образом, страницы загружаются с содержимым head + body, но теперь я хотел перенаправить на другую страницу и заменить всю существующую страницу новой страницей.Как мне это сделать?

В моем app.module.ts у меня есть следующее ...

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

Я хотел использовать при нажатии кнопку, чтобы перенаправить на эту страницу и заменитьсуществующие <app-head> и <app-body> это возможно?

Если я просто использую ниже, я все еще вижу текущие <app-head> и <app-body>

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

body.component.ts

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

Результаты дают мне текущую страницу .... и на самом деле не применимы, так как я не объединяю содержимое вместе.Я хочу заменить head.html и body.html на newpage.html из NewComponent.ts

Answer 1

Вам необходимо заменить контент в AppComponent на компонент-маршрутизатор и переместить замененный контент в новый компонент, такой как HomeComponent.Используйте HomeComponent в маршруте по умолчанию, чтобы он загружался при первом посещении сайта.

Вероятно, лучше проверить документацию на Маршрутизация и навигация , поскольку это довольно фундаментальная тема вУгловые и есть много деталей, которые вы должны узнать, прежде чем вы слишком далеко.

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