使用Observable隐藏Angular 2中的Navbar-Java 学习之路

我的问题如下：

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

app.component.html：

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

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

我使用我的 login.component 与angular2路由器，所以它显示在 <router-outlet>

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

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

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

1 回答

我遇到了类似的问题并在这里问了这个问题：How to manipulate a component on specific routes in Angular2

主要问题是（'s why i don'建议使用 @CanActivate 或 onActivate ），您只能在路由到TO而不是FROM的组件上使用这些 Router utils . 例如，如果 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

希望能帮助到你 .

回复于 2024-04-26T11:19:43+08:00

使用Observable隐藏Angular 2中的Navbar

1 回答

相关问题