Question

希望我能充分解释这个问题。我希望＆＃34;登录＆＃34;页面，让它拥有自己的html，它没有包含与受保护页面相同的代码（如topbar，menu等）。如何做到这一点。我有app.component，模板是

<topbar></topbar>
<div id="wrapper">
    <menu></menu>
    <router-outlet></router-outlet>
</div>

这对所有受保护的页面（除登录页面之外的整个应用程序）都很好，但登录页面呈现如下：

<my-app>
    <topbar><!-- topbar html code --></topbar>
    <div id="wrapper">
        <menu><!-- menu html code --></menu>
        <login><!-- login html code --></login>
        ...
    </div>
</my-app>

我该怎么做：

<my-app>
    <login><!-- login html code --></login>
    <!-- no extra code -->
</my-app>

Answer 1

您可以让顶级app.component充当“路由”组件，该组件有两条路由。第一个路由是login.component，然后第二个路由是应用程序的标准shell。

<my-app>
    <router>outlet></router-outlet>
</my-app>

然后当应用程序加载时，您将获得与此类似的登录：

<my-app>
    <router>outlet></router-outlet>
    <login>
       ...
    </login>
</my-app>

成功登录后，router.navigate到shell：

<my-app>

    <router>outlet></router-outlet>
    <topbar><!-- topbar html code --></topbar>
    <div id="wrapper">
    <menu><!-- menu html code --></menu>
    ...
</my-app>

如果我正确理解这一点，那应该有效。想到的另一件事是<ng-content></ng-content>。这允许您在另一个标记内呈现HTML和组件。

你可以覆盖angular2中的嵌套视图吗？

1 个答案: