我想创建一个迷你版本，但是有一个问题。
我创建了迷你变体sidenav菜单。我在“ sidenav-listcomponent”的列表菜单中创建了按钮，但是现在我想在“ headercomponent”的“菜单按钮”中使用按钮动作
我的“ headercomponent”代码：
import { Component, OnInit, Input, ViewChild, Directive } from '@angular/core';
import { SidenavListComponent } from '../sidenav-list/sidenav-list.component';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss'],
})
@Directive({
selector:'app-sidenav-list'
})
export class HeaderComponent implements OnInit {
@ViewChild(SidenavListComponent) child:SidenavListComponent;
constructor() { }
ngOnInit() {
}
Onclick(){
this.child.onSinenavToggle();
}
}
我的headercomponent html代码是：
<mat-toolbar color="primary" class="mat-elevation-z6">
<mat-toolbar-row>
<span>
<button mat-icon-button (click)=" Onclick()">
<mat-icon *ngIf="sideNavState || !sideNavState">menu</mat-icon>
</button>
</span>
<span>
<img src="assets/images/okcs-logo.png" alt="افق کوروش" width="70" />
</span>
</mat-toolbar-row>
</mat-toolbar>
和我的“ sidenavlistcomponent”角度代码是：
import { Component, OnInit } from '@angular/core';
import { SidenavService } from '../menuservices/sidenav.service';
import { onSideNavChange, animateText } from '../menuanimation/animations';
interface Page {
link: string;
name: string;
icon: string;
}
@Component({
selector: 'app-sidenav-list',
templateUrl: './sidenav-list.component.html',
styleUrls: ['./sidenav-list.component.scss'],
animations: [onSideNavChange, animateText]
})
export class SidenavListComponent implements OnInit {
public sideNavState: boolean = false;
public linkText: boolean = false;
public pages: Page[] = [
{name: 'Inbox', link:'some-link', icon: 'inbox'},
{name: 'Starred', link:'some-link', icon: 'star'},
{name: 'Send email', link:'some-link', icon: 'send'},
]
constructor(private _sidenavService: SidenavService) { }
ngOnInit() {
}
onSinenavToggle() {
this.sideNavState = !this.sideNavState
setTimeout(() => {
this.linkText = this.sideNavState;
}, 200)
this._sidenavService.sideNavState$.next(this.sideNavState)
}
}
和我的“ sidenavlistcomponent” html代码是：
<div class="sidenav_container" [@onSideNavChange]="sideNavState ? 'open' : 'close'">
<div fxLayout="column" fxLayoutGap="10px" style="height: 100%;">
<div class="user_menu">
<mat-nav-list>
<a mat-list-item>
<img class="jim" src="https://a57.foxnews.com/media2.foxnews.com/BrightCove/694940094001/2018/06/21/931/524/694940094001_5800293009001_5800284148001-vs.jpg?ve=1&tl=1" alt="">
<span [@animateText]="linkText ? 'show' : 'hide'">{{ page?.name }} </span>
</a>
</mat-nav-list>
<mat-divider></mat-divider>
</div>
<div>
<mat-nav-list>
<a mat-list-item *ngFor="let page of pages">
<mat-icon style="padding-right:5px;">{{page?.icon}}</mat-icon>
<span [@animateText]="linkText ? 'show' : 'hide'">{{ page?.name }} </span>
</a>
</mat-nav-list>
</div>
</div>
<span class="spacer"></span>
<div fxLayout="row" fxLayoutAlign="end center" style="padding: 0px 10px;">
<button mat-icon-button (click)="onSinenavToggle()">
<mat-icon *ngIf="sideNavState || !sideNavState" >arrow_left</mat-icon>
</button>
</div>
</div>
我的“ appcomponent”打字稿代码是：
import { Component, OnInit, ViewChild } from '@angular/core';
import { SidenavService } from './components/global/menuservices/sidenav.service';
import { onMainContentChange } from './components/global/menuanimation/animations';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
animations: [ onMainContentChange ]
})
export class AppComponent implements OnInit {
name = 'Angular';
public onSideNavChange: boolean;
constructor(private _sidenavService: SidenavService) {
this._sidenavService.sideNavState$.subscribe( res => {
this.onSideNavChange = res;
})
}
ngOnInit(){
}
}
我的“ appcomponent” html代码是：
<app-header></app-header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img src="assets/images/okcs-logo.png" alt="افق کوروش" width="70" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#headerNavbarCollapse"
aria-controls="headerNavbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="headerNavbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item" routerLinkActive="active">
<a routerLink="/applications" class="nav-link">صفحه اصلی</a>
</li>
<li class="pl-3" routerLinkActive="active">
<a routerLink="/application/create" class="btn btn-danger" routerLinkActive="active">
<i class="fas fa-plus"></i>
ایجاد برنامه جدید
</a>
</li>
</ul>
<form>
<input type="text" value="" placeholder="جستجو در برنامهها..." class="form-control" />
</form>
</div>
</nav>
</header> -->
<mat-sidenav-container class="sidenav-container">
<mat-sidenav mode="side" opened>
<app-sidenav-list></app-sidenav-list>
</mat-sidenav>
<mat-sidenav-content [@onMainContentChange]="onSideNavChange ? 'open': 'close'">
<div class="main_content">
<div style="padding: 20px">
<div class="container" id="app">
<router-outlet></router-outlet>
</div>
</div>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
<footer></footer>
和我的“ sidenavservice”代码是：
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class SidenavService {
public sideNavState$: Subject<boolean> = new Subject();
constructor() { }
}
我的动画打字稿代码：
import { trigger, state, style, transition, animate, animateChild, query } from '@angular/animations';
export const onSideNavChange = trigger('onSideNavChange', [
state('close',
style({
'min-width': '50px',
})
),
state('open',
style({
'min-width': '200px',
})
),
transition('close => open', animate('250ms ease-in')),
transition('open => close', animate('250ms ease-in')),
]);
export const onMainContentChange = trigger('onMainContentChange', [
state('close',
style({
'margin-left': '62px'
})
),
state('open',
style({
'margin-right': '200px'
})
),
transition('close => open', animate('250ms ease-in')),
transition('open => close', animate('250ms ease-in')),
]);
export const animateText = trigger('animateText', [
state('hide',
style({
'display': 'none',
opacity: 0,
})
),
state('show',
style({
'display': 'block',
opacity: 1,
})
),
transition('close => open', animate('350ms ease-in')),
transition('open => close', animate('200ms ease-out')),
]);
如何使用从“ sidenavlistcomponent”到“ headercomponent”的“菜单按钮”的“ arrow_left”点击动作？