如何使用 Angular 6 以编程方式决定路由器插座答案

【问题标题】：How to decide router-outlet programatically using angular6如何使用 Angular 6 以编程方式决定路由器插座
【发布时间】：2019-07-05 05:30:21
【问题描述】：

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

登录页面前

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

登录后页面

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

现在，我有两个页面，一个带有 router-outlet，用于显示没有菜单栏的简单页面，另一个带有由菜单栏包围的 router-outlet。但我的问题是，我无法决定哪个页面将出现在哪个路由器插座上，我如何以编程方式为页面选择路由器插座，是否有不同的方法，请咨询

--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)
    }
}

【问题讨论】：

嗨 Lijin Durairaj。如果用户被授权导航到产品或推荐页面，则可以通过使用 auth 保护轻松解决此类问题，否则使用 auth 保护重定向到登录页面。
不，我的问题不是授权/身份验证，我想以编程方式将页面放入其中一个路由器，我该怎么做？
真的有必要吗？我有一种感觉，对于这种复杂性，它有点过于复杂了。你不能只有2条路线，一条带有登录按钮+主页的路线（我们称之为登陆组件）和另一条产品+推荐（我们称之为面板组件）。然后您可以在登录后决定路由到哪个组件。路由器出口仅用于导航组件的子组件，以便不重新渲染父组件
我没有否决你的问题。我认为给出的示例中不需要路由器插座。
每个出口都有自己的一套路线。不同的出线路线不能轻易混淆。如果您不打算同时显示两个页面，那么您绝对不需要在同一页面上有两个插座。为了提供您的场景，您只需要条件渲染。

标签： angular angular6 angular-routing angular-router

【解决方案1】：

这里是路由的基本步骤，在本站https://dzone.com/articles/angular-5-material-design-login-application上提供

以上几点可以这样概括。

第一步：开发2个组件，登录组件和页面组件，以及一个命名为app.settings.ts的设置组件（这里我们可以创建一个类，其中包含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>

参考Lazy Routing，和你的想法类似https://angular.io/guide/lazy-loading-ngmodules

【讨论】：

这是不可行的，因为我必须显示和隐藏多个 div，而且会更复杂且难以维护
兄弟，你可以使用选择器（比如）而不是 div 来维护它。

【解决方案2】：

是的。你可以做到的！如果您想在成功验证后将用户导航到您的产品页面，您可以在 app.component.ts 中粘贴以下逻辑

constuctor(private router: Router)

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

Hope this will help.

【讨论】：

我已经更新，这与用户身份验证或授权无关，我想决定使用路由器插座来呈现页面