Question

可见切换按钮并随时关闭它？

我做了几次尝试但都失败了。

我上传了今天的图片，但它不会切换，只能在较低分辨率下进行切换。

知道怎么做吗？

Answer 1

I had a lot of trouble finding a way to do this in material2. Finally, I found this way reading the source-code:

<md-sidenav opened="true" disableClose="true">

Answer 2

您可以通过向其添加以下属性来保持导航栏对于您希望的任何视图：

CREATE TABLE ID_CARD(
ID              INTEGER NOT NULL AUTO_INCREMENT,
N_CARD          VARCHAR(20) NOT NULL,
ISSUE_DATE      DATE NOT NULL,
ID_TYPE         VARCHAR(2) NOT NULL,
CONSTRAINT PKEY_ID_CARD PRIMARY KEY(ID),
CONSTRAINT UI_ID_CARD UNIQUE INDEX(N_CARD,ISSUE_DATE)
);

检查Angular Docs以参考。

Answer 3

对于较新版本，请将let previousValue = realm.objects(FormAnswer.self).filter("key == %@ AND ANY form.id == %@", key, parentForm!.id).first?.answer添加到[opened]="true"元素

<md-sidenav>

Answer 4

请查看此代码段。基本上，您可以使用$mdSidenav("sidenavId").toggle()切换sidenav。

＆＃13;

angular.module('materialApp', ['ngMaterial', 'ngAnimate'])

.controller('homeCtrl', ['$scope', '$mdSidenav', function($scope, $mdSidenav) {
	$scope.toggleSideNav = function() {
		$mdSidenav('leftNav').toggle();
	};
}]);

＆＃13;

.ma-sidenav {
	background: rgb(16,108,200);
}

.btn-row {
	padding-top: 30px;
	text-align: center;
}

.btn-toggle {
	display: inline-block;
}

.sidenav-item {
	padding: 10px 10px 10px 30px;
	color: white;
}

＆＃13;

<link href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>

<body ng-app="materialApp">
	<section ng-controller="homeCtrl">
		<md-sidenav class="md-sidenav-left md-whiteframe-z2 ma-sidenav" md-component-id="leftNav">
			<div class="sidenav-item">Item 1</div>
			<div class="sidenav-item">Item 2</div>
			<div class="sidenav-item">Item 3</div>
			<div class="sidenav-item">Item 4</div>
		</md-sidenav>

		<md-content flex layout-padding>
			<div class="btn-row">
				<md-button class="md-raised btn-toggle" ng-click="toggleSideNav()">Toggle SideNav</md-button>
			</div>
		</md-content>
	</section>
</body>

＆＃13;

Answer 5

唉，＃Gabriel的解决方案还不完整。来自说明https://material.angular.io/components/sidenav/api#MatSidenav

Whether the drawer can be closed with the escape key or by clicking on the backdrop.

但是当我点击其中的某个元素（？）时，我们有3个选项可以关闭sidenav和3d。为了防止你需要覆盖回调，或者例如我曾经sidenav进行响应式设计，这个答案对我很有用https://github.com/angular/material2/issues/1130#issuecomment-299888690

Answer 6

当我按下Esc按钮时，我的侧面小门关闭了。然后我添加了

<mat-sidenav mode="side" opened [disableClose]="true">

解决了我的问题。

使用复选框切换sidenav：https://stackblitz.com/angular/ldeyaoygrmn?file=app%2Fsidenav-open-close-example.html
通过按钮切换sidenav：https://stackblitz.com/angular/pdxjaplpmav?file=app%2Fsidenav-disable-close-example.html

在Angular Material中，如何使md-sidenav始终打开

6 个答案: