Question

我正在尝试在应用程序中使用侧面板来显示许多不同的视图。基本上，它是UI的核心扩展，目的在于提供用于与事物交互的空间。根据{{3}}，我的面板本质上是一个“ Sheet”，但它是我自定义构建的。目的是能够根据触发面板打开的事件源来更改在此面板中呈现的UI。由于在Angular中，所有“视图”实际上都只是组件，因此感觉就像我需要以某种方式传递Component对象并告诉我的Panel只需按原样呈现该组件。我不希望此视图更改以任何方式与URL /路由相关。我四处张望，找不到解决办法，这让我觉得我的主意不好，还有更好的办法。

有人处理过类似的情况，但知道有一种干净的方法可以使它工作吗？

Answer 1

您有几种解决方案：

使用aux路由器配置。基本上，您只需更改辅助路由器出口的路径即可使其呈现所需的任何组件。
另一种简单的方法是使用*ngComponentOutlet。

基本上，您有一个服务或@Input()提供了需要呈现的组件，然后在侧面板模板中就可以在模板中添加它：

<ng-container *ngComponentOutlet="renderComponent"></ng-container>

在您的侧面板中：

@Component({})
export class SidePanelComponent {
  @Input()
  renderComponent?: Type<any>;
}

很显然，这是非常基本的，但是您明白了。不要忘记将要渲染的组件添加到entryComponents。

第三种方法是使用dynamic component loader。文档说明一切的地方:)虽然有点复杂

如何为通用组件提供更简洁的组件以在Angular 7中呈现

1 个答案: