我正在尝试在应用程序中使用侧面板来显示许多不同的视图。基本上,它是UI的核心扩展,目的在于提供用于与事物交互的空间。根据{{3}},我的面板本质上是一个“ Sheet”,但它是我自定义构建的。目的是能够根据触发面板打开的事件源来更改在此面板中呈现的UI。由于在Angular中,所有“视图”实际上都只是组件,因此感觉就像我需要以某种方式传递Component对象并告诉我的Panel只需按原样呈现该组件。我不希望此视图更改以任何方式与URL /路由相关。我四处张望,找不到解决办法,这让我觉得我的主意不好,还有更好的办法。
有人处理过类似的情况,但知道有一种干净的方法可以使它工作吗?
答案 0 :(得分:3)
您有几种解决方案:
使用aux路由器配置。基本上,您只需更改辅助路由器出口的路径即可使其呈现所需的任何组件。
另一种简单的方法是使用*ngComponentOutlet。
基本上,您有一个服务或@Input()
提供了需要呈现的组件,然后在侧面板模板中就可以在模板中添加它:
<ng-container *ngComponentOutlet="renderComponent"></ng-container>
在您的侧面板中:
@Component({})
export class SidePanelComponent {
@Input()
renderComponent?: Type<any>;
}
很显然,这是非常基本的,但是您明白了。不要忘记将要渲染的组件添加到entryComponents
。