md-sidenav下的内容Angular 2

Question

我创建了一个包含 md-sidenav 和 md-toolbar 的导航组件。起初，当我点击侧边栏中的 link 时，它会将我重定向到我想要的组件，但导航消失了。之后，我通过将我的导航组件也放在我想要重定向的组件中来修复它。这次成功了，但现在组件在 md-sidenav 下，而不是在侧面。会是什么呢？谢谢

Answer 1

您的路由设置可能不正确。我的猜测是您的 router-outlet 包含导航组件，并用您导航到的组件覆盖整个页面。

如果您想要使用导航和所有内容保持相同的页面布局，但使用新内容填充页面的一部分，请执行以下操作（人为的示例）：

<header-component></header-component>
<navigation-component>
    <a routerLink="/myNewComponent"></a>
</navigation-component>
<router-outlet></router-outlet> <!-- This turns into whatever you want 
                                     in the main part of the page.
                                     I.E. home page, the new page, etc -->

md-sidenav下的内容Angular 2

Content under md-sidenav Angular 2

angular-material2

angular