Html 如何在同一Angular X应用程序中显示不同的模板，如错误页面

在同一个应用程序中，是否以8种方式更改模板

例如，应用程序包括使用页眉、边栏和页脚构建的容器组件。然后内容始终显示在容器内

如果我想显示，其中包括重定向到其他页面的按钮。我不想将该页面加载到容器中，而是作为一个单独的页面/模板，使用不同的body/html样式等

我知道这可以通过

innerHTML

实现，这是个坏主意。 到目前为止，我已经实现了一些我不喜欢使用

TemplateRef

的东西，因为它只能部分工作。错误页面的body/html标记样式不会被反映出来，除非没有被封装——这是另一个坏主意

在app.component中，我根据条件更改模板-这也不能正常工作，因为条件是错误服务器响应，这是异步的

<app-container *ngIf="!condition"></app-container>
<div *ngIf="condition">
  <app-container *ngTemplateOutlet="wrapper.errorTemplate"></app-container>
  <app-error #wrapper></app-error>
</div>

在错误中。组件我有：

@ViewChild('errorTemplate', { static: true }) errorTemplate: TemplateRef<any>;

@ViewChild（'errorTemplate'，{static:true}）errorTemplate:TemplateRef；

我上面所做的可能也可以通过在不使用

TemplateRef的情况下实现conditional displaycontainer.component子级来实现

完成此操作的最佳实践是什么？
您可以选择多层布线：

root.component.html

<router-outlet></router-outlet>

这意味着您必须引导
RootModule
，将
RootComponent
添加到引导数组中，并将
index.html
中的标记更改为类似
的内容

如果url中的路径与“错误”不匹配，则从那里加载
AppModule


另一种方法是，每当加载错误页面时，使用服务隐藏页眉、侧边栏和页脚

简单的例子：

@Injectable({ providedIn: 'root' })
export class ContainerService {
  readonly isErrorPage$ = this.router.events.pipe(
    filter((event) => event instanceof NavigationEnd),
    map((event: NavigationEnd) => event.urlAfterRedirects.startsWith('/error')),
    shareReplay(1)
  );

  constructor(private router: Router) {}
}

您可以在
AppContainer
中使用它：

@Component({ ... })
export class ContainerComponent {
  readonly showContainerElements$ = this.cs.isErrorPage$.pipe(
    map((isErrorPage) => !isErrorPage)
  );

  constructor(private cs: ContainerService) {}
}

在模板中：

<app-container-header *ngIf="showContainerElements$ | async"></app-container-header>
<app-container-sidebar *ngIf="showContainerElements$ | async"></app-container-sidebar>
<app-container-footer *ngIf="showContainerElements$ | async"></app-container-footer>


感谢@Pierre的支持。我未能实现第一个解决方案，这可能是唯一应该实现的解决方案。我有一些模块错误，所以我已经切换到您的第二个解决方案，这只是一个解决办法，但我当前的应用程序配置是临时的，所以当移动到所需的解决方案时，问题将不存在。无论如何，我会尝试将多级路由放在一边，只是为了实践这个概念。@mpro在不了解应用程序的整个结构的情况下，很难为您的情况给出一个工作示例。你犯了什么样的错误？
<app-container-header *ngIf="showContainerElements$ | async"></app-container-header>
<app-container-sidebar *ngIf="showContainerElements$ | async"></app-container-sidebar>
<app-container-footer *ngIf="showContainerElements$ | async"></app-container-footer>