Angular 4 与 Material UI - Sidenav答案

【问题标题】：Angular 4 with Material UI - SidenavAngular 4 与 Material UI - Sidenav
【发布时间】：2017-09-18 09:25:59
【问题描述】：

我是新手 Angular 开发人员，我现在正在学习。

在我的项目中，我想制作一个简单的页面，带有一个按钮和一个 sidenav（使用角度材料构建），就像官方材料示例 (https://material.angular.io/components/sidenav/overview)

问题是我想在一个单独的组件中制作sidenav（如sidenav.component.ts）和app.component中的“主页”。

主页充满了段落、div 之类的东西，我想在每个页面中实现 sidenav（显然在主页中运行 onClick 事件）而不在所有页面中编写“md-sidenav-container”。

Here an example image

我必须做什么？

【问题讨论】：

将<md-sidenav-container> 放在根组件中，并使用<router-outlet> 显示动态内容

标签： angular angular-material2

【解决方案1】：

创建一个sidenav组件

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：

@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：

@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);
  }
}

（不要忘记将组件和服务添加到模块中！）

在 AppComponent 中你可以像这样使用 sidenav 组件：

<app-sidenav>
    <router-outlet></router-outlet>
</app-sidenav>

路由器将组件加载到router-outlet。 router-outlet 元素将放置在 <ng-content></ng-content> 内（参见 sidenav.component.html）。

sidenav 服务使您能够从应用程序的每个组件中控制 sidenav 组件。

header组件中sidenav服务的使用

在头部组件中注入服务：

constructor(private sidenavService: SidenavService) { }

创建切换sidenav的方法：

toggleSidenav() {
  this.sidenavService.toggle();
}

在标记中你可以使用这样的按钮：

<button (click)="toggleSidenav()">Toggle sidenav</button>

在此处查看小演示：

https://stackblitz.com/edit/angular-material-kcszgq

【讨论】：