Angular 4 with Material UI - Sidenav

Question

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

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

问题是我想在一个单独的组件中制作sidenav（例如sidenav.component.ts）和app.component中的" homepage"。

主页上充满了诸如段落，divs之类的内容，我想在每个页面中都在每个页面中实现sidenav（显然在主页上的onclick事件在主页中运行），而在所有页面中都没有写" md-sidenav-container"。

在这里示例图像

我要做什么？

Answer 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组件。

在标题组件中使用Sidenav服务

将服务注入标题组件中：

constructor(private sidenavService: SidenavService) { }

创建切换Sidenav的方法：

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

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

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

---

请参阅此处的小演示：

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