Из-за того, что я неправильно понял вопрос, я сделал последнее изменение.
В качестве вводной информации: метод тот же, если вы используете Angualr или Angular Material.
РЕДАКТИРОВАТЬ: Здесь вы можете увидеть тот же метод, примененный к Angular Material: Stack Blitz пример
ОРИГИНАЛ: Да, ваш компонент меню должен отправлять boolean
ввод в контейнер вашей страницы с помощью eventEmitter
, поэтому, когда страница загружена, состояние ввода по умолчанию - true
, а при щелчке по пункту меню состояние ввода изменится на false
, а app-home
будет скрыто.
Ваш контейнер страницы (или основной компонент боковой навигации) будет таким
// Imports omitted
@Component({
selector: 'page-container',
template: `
<mat-sidenav-container>
<mat-sidenav opened mode="side">Lorem ipsum</mat-sidenav>
<mat-sidenav-content>
<menu-component (show)="show($event)" (hide)="hide($event)"></menu-component>
</mat-sidenav-content>
<mat-sidenav-content>
<app-home [toggle]="visible"></app-home>
</mat-sidenav-content>
</mat-sidenav-container>`
})
export class PageContainerPage {
visible: boolean;
show(event: boolean) {
this.visible = event;
}
hide(event: boolean) {
this.visible = event;
}
}
Ваш компонент меню будет таким - здесь используется эмиттер событий и вывод
// Imports omitted
@Component({
selector: 'menu',
template: `
<ul>
<li (click)="showElement()">menu item 1</li>
<li (click)="hideElement()">menu item 2</li>
</ul>`
})
export class MenuComponent {
showHideBoolean: boolean; // Just delete default value
// Output to send
@Output() show: EventEmitter<Boolean> = new EventEmitter<Boolean>();
@Output() hide: EventEmitter<Boolean> = new EventEmitter<Boolean>();
showHideElement(){
console.log('you have click on a menu item')
this.showHideBoolean = !this.showHideBoolean;
if (this.showHideBoolean) {
this.show.emit(true);
console.log('value to send: ', this.showHideBoolean)
} else {
this.hide.emit(false);
console.log('value to send: ', this.showHideBoolean)
}
}
}
Ваш компонент app-home будет таким - здесь используется input
@Component({
selector: 'app-home',
template: `
<div [hidden]="toggle">I'm the first element</div>
<div [ngClass]="{'color-red' : toggle}">I'm the second element!</div>
<div *ngIf="toggle">I'm an element too!</div>`
})
export class AppHomeComponent {
// Use @Import here
@Input() toggle: Boolean; // Just remove the default value
}
person
Emanuele
schedule
08.01.2019