Question

我必须显示两个不同的页面，即登录之前和登录页面之后

登录页面之前

这只会显示主页和登录按钮

登录页面后

这将显示一个具有所有菜单的通用模板页面

现在，我有两个页面，一个带有路由器出口，用于显示不带菜单栏的简单页面，另一个带有路由器出口，其周围被菜单栏包围。但是我的问题是，我无法决定哪个页面将在哪个路由器出口上显示，我如何以编程方式为该页面选择路由器出口，是否有其他方法可以这样做，请咨询

-router-outlet-A

--home page

--login page

-router-outlet-B

--product page

--testimonial page

更新：

我正在寻找类似的东西

<router-outlet #templateA></router-outlet> 
<router-outlet #templateB></router-outlet>

decideOnTemplate() {
    if(user-not-logged-in) {
        this.templateA.send(this.page)
    } else {
        this.templateB.send(this.page)
    }
}

Answer 1

以下是该网站https://dzone.com/articles/angular-5-material-design-login-application

中提供的路由的基本步骤

以上几点可以总结如下。

第1步：开发2个组件，分别是Login组件和Page Component，以及一个命名为app.settings.ts的Setting Component（在这里我们可以创建一个类，其中包含Sidenavbar的变量，固定标头）

mport { Injectable } from '@angular/core';
import { Settings } from './app.settings.model';

@Injectable()
export class AppSettings {
    public settings = new Settings(
        true,       // fixedHeader
        true,       // sidenavIsOpened
    );
}

第2步：借助上述设置（此处是用户定义的sidenavIsOpened），我们可以通过* ngIf处理导航栏div。

  <mat-sidenav *ngIf="settings.sidenavIsOpened">
        <app-sidenav></app-sidenav> // here we can give our pages details.
    </mat-sidenav>

请参阅“惰性路由”，它类似于您的想法https://angular.io/guide/lazy-loading-ngmodules

Answer 2

是的，你可以做到！如果要在成功通过身份验证后将用户导航到产品页面，则可以在app.component.ts

中的逻辑下面粘贴

constuctor(private router: Router)

login(){
<--- Your logic --->
this.router.navigate(['/product-page']);
}

Hope this will help.

如何使用angular6以编程方式确定路由器插座

2 个答案: