0

我正在创建一个 Web 应用程序，该应用程序将在角度 4 中从另一个页面加载侧面菜单。我的带有 routerLink 的菜单按钮在此处定义。

<a class="menu-button"routerLink="/menu">
  <div class="menu" > 
    <div class="bar" id="bar-1"></div>
    <div class="bar" id="bar-2"></div>
    <div class="bar" id="bar-3"></div>
  </div>
</a>

即使菜单打开，导航栏也会可见，我想知道在 Angular 4 中是否有办法在菜单打开时将 routerLink 从“/menu”切换到“/home”。

4

2 回答 2

0

我只是需要在路由和应用程序根路由之间切换。我使用以下指令添加了该功能：

import { Directive, HostListener, Input, Self } from '@angular/core';
import { RouterLink, Router } from '@angular/router';

/**
 * This directive adds the ability to toggle a route with Angular's
 * {@link RouterLink} directive.
 *
 * ### Example:
 * ```html
 * <button routerLink="/my-path" routerLinkToggle></button>
 * ```
 * The example above creates a toggle button that navigates between
 * `http://localhost/my-path` and `http://localhost`.
 */
@Directive({
    selector: '[routerLinkToggle]'
})
export class RouterLinkToggleDirective {

    /**
     * The {@link RouterLink.onClick} method.
     */
    private readonly _onClick: () => boolean;

    /**
     * Navigation commands.
     */
    private commands: any[] = [];

    constructor(@Self() private routerLink: RouterLink,
        private router: Router) {

        // Keep a reference to the original `routerLink.onClick` method.
        this._onClick = this.routerLink.onClick;

        // Replace the `routerLink.onClick` method with a dummy method.
        // This is needed because the order in which directives on the
        // same host element are executed is undefined. By overwriting
        // routerLink's onClick method but keeping a reference to it, we
        // now have control over when it will be called.
        this.routerLink.onClick = () => true;
    }

    /**
     * Set the path of the route that you want to toggle to. If no path
     * is provided, the directive navigates to the root of the app.
     */
    @Input()
    set routerLinkToggle(commands: any[] | string) {
        if (commands != null) {
            this.commands = Array.isArray(commands) ? commands : [commands];
        } else {
            this.commands = [];
        }
    }

    @HostListener('click')
    onClick() {
        if (this.router.isActive(this.routerLink.urlTree, true)) {
            this.router.navigate(this.commands);

        } else {
            // Call the `_onClick` method within its original `routerLink` conext.
            this._onClick.call(this.routerLink);
        }
    }
}
于 2017-12-05T12:36:54.937 回答
0

不知道能不能回答你的问题，

但是您可以使用routerLinkActive指令来检查哪个路由是活动的，并基于该隐藏或显示相应的链接。

检查以下实现，

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
  <hr />
    <a routerLink="/home" [ngClass]="{'hide': !menu.isActive}"
       routerLinkActive #home="routerLinkActive" >Home</a>

    <a routerLink="/menu" [ngClass]="{'hide': !home.isActive}" 
       routerLinkActive #menu="routerLinkActive" >Menu</a>
  <hr />
  <router-outlet></router-outlet>
  `,
  styles:[
    `
    .hide{
      display: none;
    }
    `
  ]
})
class AppComponent { name = 'Angular'; }

这是Plunker！

于 2017-07-13T15:48:30.837 回答