Я предлагаю вам воспользоваться услугами . Преимущества состоят в том, что с ними очень легко начать и легко использовать. Кроме того, сервис доступен для каждого компонента или даже для других сервисов, вы можете переключать боковую панель с любого количества различных компонентов. Если вы знакомы, например, с C #, служба ведет себя подобно одиночному в C #.
Таким образом, вы должны создать новый сервис, набрав ng g s toggle в Angular CLI.
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class ToggleService {
constructor() { }
}
Решение 1:
Это более простой способ без приятной анимации. Самый простой способ переключить компонент боковой панели, поместив его уже в правильное положение, но установив display: none. Затем вы используете ngClass, чтобы установить класс css для компонента боковой панели, в зависимости от свойства. Примените этот код к тегу самого верхнего компонента боковой панели.
[ngClass]="{'show-sidebar': toggleService.showSidebar}"
Чтобы это работало, вы должны создать новый класс CSS в боковой панели CSS. Добавить:
.show-sidebar {
display: block;
}
После этого вы добавляете свойство в сервис.
private _showSidebar = false;
public get showSidebar(): boolean{
return this._showSidebar;
}
public set showSidebar(v : boolean) {
this._showSidebar = v;
}
Теперь вы внедряете сервис в компонент боковой панели и назначаете его свойству, чтобы иметь возможность ссылаться на сервис в вашем html-файле. Таким образом, вы можете использовать значение bool showSidebar для переключения класса show-sidebar css.
Следующим шагом будет внедрение службы в компонент, где находится кнопка, который вы используете для переключения боковой панели. После этого вы добавляете событие нажатия на кнопку, где вы изменяете значение toggleService.showSidebar на true.
Решение 2:
Теперь, если вы хотите использовать, например, Angular Animations вы можете добавить свойство к сервису, которое вы можете изменить из одного компонента, и это изменение переключит состояние анимации, чтобы оживить боковую панель для перемещения на экран.
private _sideBarState = 'inactive';
public get sideBarState(): string {
return this._sideBarState;
}
public set sideBarState(v : string) {
this._sideBarState = v;
}
Затем вы привязываете sliderState к вашему компоненту в формате html, то есть в html компонента боковой панели. Просто добавьте это в тег самого верхнего на боковой панели.
[@sliderState]="toggleService.sideBarState"
Чтобы сделать это, вы должны вставить toggleService в компонент боковой панели. Если у вас есть вопросы по этому поводу, просто спросите меня.
После этого вам нужно добавить различные анимации в декоратор компонента, который вы хотите анимировать, компонент боковой панели.
@Component({
selector: 'core-detail-page',
templateUrl: './detail-page.component.html',
styleUrls: ['./detail-page.component.scss'],
animations: [
trigger('sliderState', [
state('active', style({
left: '0',
display: 'block'
})),
state('inactive', style({
left: '-300px',
display: 'none'
})),
transition('inactive => active', animate('300ms ease-out')),
transition('active => inactive', animate('300ms ease-out'))
])
]
}) * 1 054 *
Это всего лишь некоторые фиктивные значения, в которых я притворяюсь, что ваш компонент боковой панели установлен на position: absoulte и расположен прямо рядом с вашим экраном, эти -300px. И как только вы измените значение sidebarState в toggleService на active, свойства left и display будут анимированы в соответствии с вашими определениями анимации. Вы можете анимировать любую недвижимость, какую захотите.
Изменение sidebarState выполняется путем введения toggleService в компонент, где находится ваша кнопка, которую вы хотите использовать для переключения боковой панели. После внедрения службы вы добавляете метод нажатия к кнопке, и в этом методе вы изменяете значение sidebarState.
toggleSidebar() {
this.toggleService.sideBarState = 'active';
}