Angular – 从另一个组件打开/关闭sidenav

发布时间：2020-12-17 07:20:29 所属栏目：安全来源：网络整理

导读：我使用角度(最新版本)和角度材料. 有3个组成部分： header.component,其中有一个用于right-sidenav的控制按钮 rigth-sidenav.component,其中是right-sidenav sidenav.component(这是左侧主菜单),这个组件调用header.component,right-sidenav.component和cont

我使用角度(最新版本)和角度材料.

有3个组成部分：

> header.component,其中有一个用于right-sidenav的控制按钮
> rigth-sidenav.component,其中是right-sidenav
> sidenav.component(这是左侧主菜单),这个组件调用header.component,right-sidenav.component和content

我第一次使用Angular,请告诉我,如何从另一个组件打开/关闭sidenav(在我的例子中,按钮在header.component中).

尝试了以下选项(但得到错误：TypeError：this.RightSidenavComponent.rightSidenav未定义)：

header.component.html

<button mat-button (click)="toggleRightSidenav()">Согласование до 16:00 сегодня</button>

header.component.ts

import { Component } from '@angular/core';
import { RightSidenavComponent } from '../right-sidenav/right-sidenav.component';
@Component({
  selector: 'app-header',templateUrl: './header.component.html',styleUrls: ['./header.component.scss']
})
export class HeaderComponent {

	constructor(public RightSidenavComponent:RightSidenavComponent) {	}
	toggleRightSidenav() {
		this.RightSidenavComponent.rightSidenav.toggle();
	}
	
}

sidenav.component.html

<mat-sidenav-container class="sidenav-container">
	<mat-sidenav #sidenav mode="side" opened="true" class="sidenav"
				 [fixedInViewport]="true"> Sidenav	</mat-sidenav>
	<mat-sidenav-content>
		<app-header></app-header>
		<router-outlet></router-outlet>
		<app-right-sidenav #rSidenav></app-right-sidenav>
	</mat-sidenav-content>
</mat-sidenav-container>

sidenav.component.ts

import { Component,Directive,ViewChild } from '@angular/core';
import { RightSidenavComponent } from '../right-sidenav/right-sidenav.component';

@Component({
  selector: 'app-sidenav',templateUrl: './sidenav.component.html',styleUrls: ['./sidenav.component.scss']
})

export class SidenavComponent {
	
	@ViewChild('rSidenav') public rSidenav;
	constructor(public RightSidenavComponent: RightSidenavComponent) {
		this.RightSidenavComponent.rightSidenav = this.rSidenav;
	}
	
}

右sidenav.component.html

<mat-sidenav #rightSidenav mode="side" opened="true" class="rightSidenav"
			 [fixedInViewport]="true" [fixedTopGap]="250">
	Sidenav
</mat-sidenav>

右sidenav.component.ts

import { Component,Injectable } from '@angular/core';

@Component({
  selector: 'app-right-sidenav',templateUrl: './right-sidenav.component.html',styleUrls: ['./right-sidenav.component.scss']
})

@Injectable()
export class RightSidenavComponent {
	
	public rightSidenav: any;

	constructor() { }

}

Non-working sample with code stackblitz

我有同样的问题使用.我这样解决了.

SidenavService

import { Injectable } from '@angular/core';
import { MatSidenav } from '@angular/material';

@Injectable()
export class SidenavService {
    private sidenav: MatSidenav;


    public setSidenav(sidenav: MatSidenav) {
        this.sidenav = sidenav;
    }

    public open() {
        return this.sidenav.open();
    }


    public close() {
        return this.sidenav.close();
    }

    public toggle(): void {
    this.sidenav.toggle();
   }

你的组件

constructor(
private sidenav: SidenavService) { }

toggleRightSidenav() {
   this.sidenav.toggle();
}

Bind your html toggle() based on your requirement.

应用组件.

@ViewChild('sidenav') public sidenav: MatSidenav;

constructor(private sidenavService: SidenavService) {
}

ngOnInit(): void {
  this.sidenavService.setSidenav(this.sidenav);
}

应用模块

providers: [YourServices,SidenavService],

Working sample with code stackblitz

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!