以角度4加载路由器出口外的页面

Question

我正在开发 angular 4 应用程序，我想在路由器<

之外加载 login.page.ts >

这是我的 home.component.html 文件

<div class="container">
   <top-nav-bar></top-nav-bar>
   <lett-nav-bar></lett-nav-bar>
   <router-outlet></router-outlet>
</div>

路线配置

const MAINMENU_ROUTES: Routes = [
    { path: 'login', component: LoginComponent },
    { path: '', redirectTo: 'home', pathMatch: 'full'},
    { path: 'home', component: HomeComponent, canActivate: [AuthGuard]}
];

有了这个，我可以在路由器内加载登录页面，但我想在进入路由器插座之前全屏加载登录页面。

Answer 1

如果没有路由器插座，您将无法路由到该页面。根据您所描述的内容，听起来您需要更高级别的其他路由器插座，例如在App组件中。像这样：

<div class="container">
   <router-outlet></router-outlet>
</div>

然后，您可以将登录页面和主页组件路由到此路由器插座。

您的路线配置将如下所示：

    { path: 'login', component: LoginComponent },
    { path: 'home', component: HomeComponent, canActivate: [AuthGuard], 
      children: [
       { path: 'child1', component: Child1Component },
       { path: 'child2', component: Child2Component }
      ]
    }

登录和家庭路线将出现在App Component的路由器插座中，因此登录页面将全屏显示，没有导航栏。 child1和child2路由将出现在Home Component的路由器插座中。

Answer 2

推荐使用

DeborahK答案，但是有一种方法可以避免使用其他路由器出口，方法是使用App Component中识别的查询参数，该参数可以做出反应，并使某些元素（页眉，页脚）消失。

app.component.html

<app-nav-menu [hidden]="hasFullView"></app-nav-menu>
<div class="{{!hasFullView ? 'body-container' : ''}}">
  <router-outlet></router-outlet>
</div>
<app-footer [hidden]="hasFullView"></app-footer>

app.component.ts

hasFullView = false;

private setHasFullView() {
    this.activatedRoute.queryParams.subscribe(params => {
        this.hasFullView = params["hasFullView"] || false;
    });
}

ngOnInit() {
  this.setHasFullView();
}

用法示例

showPrintView() {
  const url = `module/user-edit-printout/${userId}?hasFullView=true`;
  window.open(url);
}