时间戳

首页 > 解决方案 > 如何通过另一个组件的按钮进行切换？

angular6 - 如何通过另一个组件的按钮进行切换？

问题描述

这是流程

rigntsidenav.component.html 

<div ng-sidebar-content>
    <button (click)="_toggleSidebar()">Toggle sidebar</button>
    <p>
        Start editing to see some magic happen :)
    </p>
</div>

sidenav.service.ts

export class SidenavService {
public _opened: boolean = false;

public _toggleSidebar() {
this._opened = !this._opened;
}
constructor() { }
}

sidenav.component.html

<ng-sidebar [(opened)]="_opened" position="right">
  <ul>
    <li>Menu Item</li>
    <li>Menu Item</li>
    <li>Menu Item</li>
  </ul>
</ng-sidebar>

如何用角度切换sidenav请帮助我

标签： angular6

解决方案

sidenav.service.ts

@Injectable()
export class SideNavService {
    public _opened = false;
    private sideNavSubject = new Subject<SideNavState>();
    sideNavState = this.sideNavSubject.asObservable();

    constructor() { }

    _show() {
        this.sideNavSubject.next(<SideNavState>{ _opened: true });
    }

    _hide() {
        this.sideNavSubject.next(<SideNavState>{ _opened: false });
    }
}

export interface SideNavState {
    _opened: boolean;
}

sidenav.component.ts

public _opened = false;

  constructor(private sideNavService: SideNavService) { }

  ngOnInit() {
    this.sideNavService.sideNavState.subscribe((state: SideNavState) => {
      this._opened = state._opened;
    });
  }

rigntsidenav.component.ts

constructor(private sideNavService: SideNavService) { }

  _toggleSidebar() {
    this.sideNavService._show();
  }

记得添加SideNavService到app.module.tsproviders

推荐阅读