Angular 使用ng侧边栏作为组件的角度侧边栏不工作
我正在使用ng侧边栏构建一个切换侧边栏 [https://www.npmjs.com/package/ng-sidebar][1] 我在一个组件中构建了它之所以这样做是因为我只想在四页中显示切换侧栏,所以我不想在根应用程序component.ts上调用相同的侧栏 我的logot.component.ts代码如下Angular 使用ng侧边栏作为组件的角度侧边栏不工作,angular,Angular,我正在使用ng侧边栏构建一个切换侧边栏 [https://www.npmjs.com/package/ng-sidebar][1] 我在一个组件中构建了它之所以这样做是因为我只想在四页中显示切换侧栏,所以我不想在根应用程序component.ts上调用相同的侧栏 我的logot.component.ts代码如下 <ng-sidebar-container> <!-- sidebar --> <ng-sidebar [opened] = "opene
<ng-sidebar-container>
<!-- sidebar -->
<ng-sidebar [opened] = "opened">
<button (click) = "toggleSidebar()">
x
</button>
<ul class = "menu">
<li>
<span (click)="logout()">Logout</span>
</li>
</ul>
</ng-sidebar>
<div ng-sidebar-content>
To open the sidebar
<!-- Page Content -->
<button (click) = "toggleSidebar()">
Open sidebar
</button>
</div>
</ng-sidebar-container>
<app-header></app-header>
<app-logout></app-logout>
{{ home|json }}
<app-footer></app-footer>
我在家里这样叫它
<ng-sidebar-container>
<!-- sidebar -->
<ng-sidebar [opened] = "opened">
<button (click) = "toggleSidebar()">
x
</button>
<ul class = "menu">
<li>
<span (click)="logout()">Logout</span>
</li>
</ul>
</ng-sidebar>
<div ng-sidebar-content>
To open the sidebar
<!-- Page Content -->
<button (click) = "toggleSidebar()">
Open sidebar
</button>
</div>
</ng-sidebar-container>
<app-header></app-header>
<app-logout></app-logout>
{{ home|json }}
<app-footer></app-footer>
以前没有使用过ng侧边栏,从中,打开的属性应为双向绑定,请尝试:
<ng-sidebar [(opened)]="_opened">
尝试这些更改,并相应地在主体组件中添加左边距
logout.component.html
<ng-sidebar-container [class.vh-close]="!opened" [class.vh-open]="opened">
<!-- sidebar -->
<ng-sidebar [opened] = "opened">
<button (click) = "toggleSidebar()">
x
</button>
<ul class = "menu">
<li>
<span (click)="logout()">Logout</span>
</li>
</ul>
</ng-sidebar>
<div ng-sidebar-content>
<button *ngIf="!opened" (click) = "toggleSidebar()">
->
</button>
</div>
</ng-sidebar-container>
一旦我添加了这个,一切都可以正常工作,但问题是主机组件中没有任何东西在这里工作,我正在共享代码{{home | json}}
添加这个之后,我无法按任何按钮或任何东西。更新了答案。你能试试给定的解决方案吗?我正在这样使用,你能给我看完整的代码吗?
.vh-open {
height: 100vh;
width: 20vw;
z-index: 3;
position: fixed;
background-color: aqua;
}
.vh-close {
height: 100vh;
z-index: 0;
position: fixed;
width: 5vw;
}