Question

我的问题如下：

我的app.component中有一个导航栏，我想隐藏一下，例如，只需通过ngIf将布尔变量设置为true即可登录。

app.component.html：

<navbar *ngIf="_userLoggedIn === true" ></navbar>
<router-outlet></router-outlet>

在浏览网页并阅读大量问题后，我认为应该使用Observables。但我无法弄清楚如何以一种好的方式使用它们。我的想法是在全局服务中使用Observable来共享变量，以便child component可以访问和编辑该变量，app.component可以订阅该变量以将_userLoggedIn更改为true（如果observable设置为true，则为false false。

我将login.component与angular2路由器一起使用，因此它显示在<router-outlet>

中

{
        path: '/login',
        name: 'Login',
        component: LoginComponent,
        useAsDefault: true
    },

在该组件中，我想在成功登录后将该变量设置为true。因此它会在app.component中更改，并显示导航栏。如果您需要任何进一步的代码，请告诉我。

如果你们中的某个人可以帮我解决问题或为我的问题找到替代解决方案，那就太棒了。

Answer 1

我遇到了类似的问题，并在此处提出了问题：How to manipulate a component on specific routes in Angular2

主要问题是（这就是为什么我不建议使用@CanActivate或onActivate），您只能在组件上使用这些Router实用程序路由到TO而不是FROM。例如，如果您的app.component中有一个顶部栏或侧边栏，其模板中包含router-outlet，则您无法以良好的方式访问路径数据。

这就是为什么你可以扩展默认router-outlet并将你的逻辑放在那里的原因。

@RouteConfig看起来像这样：

@RouteConfig([
{
    path: '/login',
    name: 'Login',
    component: LoginComponent,
    data: {
        hideTopbar: true,
        hideSidebar: true
    }
},

和app.component的模板看起来像这样：

<div class="topbar" *ngIf="showTopbar">...</div>
<extended-router-outlet></extended-router-outlet>

您可以在app.component课程中进行管理：

export class AppComponent {
    showTopbar:boolean;
    showSidebar:boolean;

    constructor(private _routingEventService:RoutingEventService) {
        this._routingEventService.onRouteChanged().subscribe(routeData => {
            this.showTopbar = !routeData.hideTopbar;
            this.showSidebar = !routeData.hideSidebar;
        });
    }
}

使用注入的routingEventService，如上面链接的接受答案：

@Injectable()
export class RoutingEventService {
    private _eventEmitter: EventEmitter<any> = new EventEmitter();

    routeIsChanging(obj:any) {
        this._eventEmitter.emit(obj);
    }

    onRouteChanged() {
        return this._eventEmitter;
    }
}

最后，在你的新router-outlet指令中构建逻辑，如下所示：

@Directive({
    selector: 'extended-router-outlet'
})

export class ExtendedRouterOutlet extends RouterOutlet {
    private parentRouter:Router;

    constructor( _elementRef: ElementRef,
                 _loader: DynamicComponentLoader,
                 _parentRouter: Router,
                 @Attribute('name') nameAttr: string,
                 private _routingEventService:RoutingEventService ) {
        super(_elementRef, _loader, _parentRouter, nameAttr);
        this.parentRouter = _parentRouter;
    }

    activate(nextInstruction: ComponentInstruction): Promise<any> {
        this._routingEventService.routeIsChanging({
           name: nextInstruction.routeName,
           hideTopbar: nextInstruction.routeData.data['hideTopbar'],
           hideSidebar: nextInstruction.routeData.data['hideSidebar']
        });
        return super.activate(nextInstruction);
   }
}

使用这种方法，您甚至可以处理其他特定于路线的逻辑，例如检查身份验证或角色，正如我在回答以下问题时用相同的方法解释的那样：

Fill form after http response in angular2

希望它有所帮助。

使用Observable隐藏Angular 2中的Navbar

1 个答案: