html - Angular 4 : Master page with side bar concept

标签 html css angular master-pages

我正在使用 Angular 4,我想为所有页面创建一个母版页概念。

这就是我想要的:

enter image description here

事实上,我想要一个带有自己模板(如我的屏幕)的身份验证页面,而其他页面则使用不同的模板。

例如,我想要一个固定工具栏和一个左侧边栏。在页面内部,动态内容

在我的想法中,页面 AppComponent 中的路由器导出将显示身份验证页面或“母版页”(工具栏和侧边栏),然后,在这个母版页中,我为我的动态 内容。

但它不起作用......

我该怎么做?

谢谢

最佳答案

如果你使用的是angular4,那么使用components .

您可以制作这些组件:

Authentification
Authentification-Content
Authentification-Sidebar
Master
Master-Titlebar
Master-Sidebar
Master-Content
Home
Product

然后只需将组件相互注入(inject)即可获得所需的结果。

例如,如果你想显示产品页面,你可以像这样注入(inject)你的组件:

index.html
    Master
        Master-Titlebar
        Master-Sidebar
        Master-content
            Product

关于html - Angular 4 : Master page with side bar concept,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44443385/

相关文章:

JQuery 内容 slider - 最佳实践?

html - 如何在图像的中心显示文本,其中有 2 行图像,每行 4 个图像

javascript - 调整div大小时如何保持用户的滚动位置

html - 对齐网页标题中的文本和社交媒体图标

javascript - canvas - 由 fabricjs 和 angularjs 使用捏缩放

css - 可访问的纯 CSS 选项卡 View

jquery - 从左到右更改jquery滑动菜单的方向

javascript - 如果用户单击图标图像,如何显示 bsDatePicker 弹出窗口

angular - 如何将 bootstrap popover 绑定(bind)添加到我的 HTML?

javascript - 本地存储和ngrx存储