[英]Angular 4 with Material UI - Sidenav
I am newbie-Angular developer and I'm learning right now. 我是新手,Angular开发人员,现在正在学习。
In my project I want to make a simple page with a button and a sidenav (built with angular material) like the official material example ( https://material.angular.io/components/sidenav/overview ) 在我的项目中,我想制作一个带有按钮和sidenav(使用棱角材质构建)的简单页面,例如官方材质示例( https://material.angular.io/components/sidenav/overview )
The problem is that I want to make the sidenav in one separate component (like sidenav.component.ts) and the "homepage" in the app.component. 问题是我要在一个单独的组件(如sidenav.component.ts)中创建sidenav,并在app.component中创建“主页”。
The homepage is full of stuff like paragraphs, divs, and I want to implement the sidenav (obviously with the onClick event functioning in the homepage) in every page without write "md-sidenav-container" in all pages. 主页中充满了诸如段落,div之类的内容,并且我想在每个页面中实现sidenav(显然是在主页中具有onClick事件功能),而不必在所有页面中都写“ md-sidenav-container”。
Here an example image 这是一个示例图像
What I have to do? 我该怎么办?
sidenav.component.html: sidenav.component.html:
<md-sidenav-container>
<md-sidenav #sidenav mode="side">
Sidenav content
</md-sidenav>
<ng-content></ng-content>
</md-sidenav-container>
sidenav.component.ts: sidenav.component.ts:
@Component({
selector: 'app-sidenav',
templateUrl: './sidenav.component.html',
styleUrls: ['./sidenav.component.scss']
})
export class SidenavComponent implements OnInit {
@ViewChild('sidenav') public sidenav: MdSidenav;
constructor(private sidenavService: SidenavService) { }
ngOnInit() {
this.sidenavService.setSidenav(this.sidenav);
}
}
sidenav.service.ts: sidenav.service.ts:
@Injectable()
export class SidenavService {
private sidenav: MdSidenav;
public setSidenav(sidenav: MdSidenav) {
this.sidenav = sidenav;
}
public open(): Promise<MdDrawerToggleResult> {
return this.sidenav.open();
}
public close(): Promise<MdDrawerToggleResult> {
return this.sidenav.close();
}
public toggle(isOpen?: boolean): Promise<MdDrawerToggleResult> {
return this.sidenav.toggle(isOpen);
}
}
(Don't forget to add the component and the service to a module!) (不要忘记将组件和服务添加到模块中!)
In the AppComponent you can use the sidenav component like this: 在AppComponent中,您可以使用sidenav组件,如下所示:
<app-sidenav>
<router-outlet></router-outlet>
</app-sidenav>
The router loads the components into the router-outlet
. 路由器将组件加载到router-outlet
。 The router-outlet
element will be placed inside the <ng-content></ng-content>
(see sidenav.component.html). router-outlet
元素将放置在<ng-content></ng-content>
(请参阅sidenav.component.html)。
The sidenav service enables you to control the sidenav component from every component of your application. sidenav服务使您可以从应用程序的每个组件控制sidenav组件。
Inject the service inside the header component: 将服务注入到标头组件中:
constructor(private sidenavService: SidenavService) { }
Create method to toggle the sidenav: 创建方法以切换sidenav:
toggleSidenav() {
this.sidenavService.toggle();
}
And in the markup you can use a button like this: 在标记中,您可以使用如下所示的按钮:
<button (click)="toggleSidenav()">Toggle sidenav</button>
See small demo here: 在此处查看小型演示:
https://stackblitz.com/edit/angular-material-kcszgq https://stackblitz.com/edit/angular-material-kcszgq
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.