材料设计灯+角2

Question

任何人都知道为什么在这个plunker中 ，Material Design Lite sidenav（或者他们称之为抽屉）在用作组件时不会显示？

当它没有被用作这种类型的组件时，它工作正常

我正在使用以下但可能在错误的区域????

componentHandler.upgradeAllRegistered();

Answer 1

我也在努力解决这个问题。 我的组件大部分都在工作，但是当我点击内容时它并没有消除抽屉。

我发现这有用： https ： //stackoverflow.com/a/35451821/1341825

尝试将mdl属性添加到根节点。 喜欢：

<div mdl class="mdl-layout mdl-js-layout mdl-layout--fixed-header">

Answer 2

我不认为这可以使用Material Design Lite完成，至少现在不行。 我最终使用了Angular Material 2并且能够将sidenav分离到它自己的组件中。 查看此plunker的示例。

以下是链接不起作用的代码。

app.component.html

<my-sidenav></my-sidenav>

app.component.ts

import {Component} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';
import {SidenavComponent} from 'sidenav.component.ts';
import {GlueService} from 'glue.service.ts';

@Component({
  selector: 'material-app',
  templateUrl: 'app.component.html',
  directives: [SidenavComponent],
  providers: [GlueService]
})
export class AppComponent {
}

bootstrap(AppComponent);

由于sidenav是其他所有东西的外部容器，因此必须首先加载它：

sidenav.component.html

<md-sidenav-layout>
<md-sidenav #start [opened]="opened" id="left_sidenav" layout-padding>
<h2>Sidenav</h2>
<button md-raised-button class="md-raised md-primary" (click)="start.close()">Close</button>
</md-sidenav>
<md-content>
<my-content></my-content>
</md-content>
</md-sidenav-layout>

sidenav.component.ts

import {Component, ViewChild} from '@angular/core';
import {MdButton} from '@angular2-material/button';
import {MD_SIDENAV_DIRECTIVES, MdSidenav} from '@angular2-material/sidenav';
import {ContentComponent} from 'content.component.ts';
import {GlueService} from 'glue.service.ts';

@Component({
  selector: 'my-sidenav',
  templateUrl: 'sidenav.component.html',
  directives: [MdButton, MD_SIDENAV_DIRECTIVES, ContentComponent],
  providers: []
})
export class SidenavComponent{
opened: false;
@ViewChild('start') sidenavComponent: MdSidenav;
constructor(private glueService: GlueService) {

glueService.toggleConfirmed$.subscribe(
  toggle => {
    this.toggleLeftNav();
  });
}
toggleLeftNav(){

 (<MdSidenav>this.sidenavComponent).open();

}

}

内容组件包含标题和内容。 您可以轻松地将其拆分为2个组件。

content.component.html

<md-toolbar color="primary">
<button md-raised-button style="color:black;margin:10px" (click)="openLeftNav()">Open Sidenav</button>
Angular Material 2 App
</md-toolbar>
<h2>Content</h2>

content.component.ts

import {Component,  OnDestroy} from '@angular/core';
import {MdToolbar} from '@angular2-material/toolbar';
import {MdButton} from '@angular2-material/button';
import { GlueService } from 'glue.service.ts';

@Component({
  selector: 'my-content',
  templateUrl: 'content.component.html',
  directives: [MdToolbar, MdButton]
})
export class ContentComponent implements OnDestroy{
   constructor(private glueService: GlueService) { }

   openLeftNav(){
     this.glueService.confirmToggle(true);
   }

}

我创建了一个服务（不知道该怎么称呼它），它允许不同的组件相互通信。 我称之为glue.service.ts。 我也不知道这是否是一个组件与另一个组件交谈的最佳方式，尽管Angular 2的食谱中提到了这种方法。

glue.service.ts

import { Injectable } from '@angular/core'
import { Subject }    from 'rxjs/Subject';
@Injectable()
export class GlueService {
  private toggleAnnouncedSource = new Subject<boolean>();
  private toggleConfirmedSource = new Subject<boolean>();
  // Observable string streams
  toggleAnnounced$ = this.toggleAnnouncedSource.asObservable();
  toggleConfirmed$ = this.toggleConfirmedSource.asObservable();
  // Service message commands
  announceToggle(toggle: boolean) {
    this.toggleAnnouncedSource.next(toggle)
  }
  confirmToggle(toggle: boolean) {
    this.toggleConfirmedSource.next(toggle);
  }
}

Answer 3

MDL抽屉中作为Angular组件的基本问题是， mdl-layout__drawer需要是mt mdl-js-layout的直接子代。
但是在你的“生成”html中， <my-sidenav>仍然是mdl-layout__drawer的父mdl-layout__drawer

  <div data-upgraded=",MaterialLayout" class="mdl-layout mdl-js-layout mdl-layout--fixed-header is-small-screen is-upgraded">
    <div class="android-header mdl-layout__header mdl-layout__header--waterfall">..</div>
     <my-sidenav>   
       <div class="android-drawer mdl-layout__drawer">
        <nav class="mdl-navigation">
          <a href="" class="mdl-navigation__link">Nav 1</a>
        </nav>
       </div>
      </my-sidenav>
      <div mdl="" class="android-content mdl-layout__content">
        <h2>Content stuff here</h2>...
      </div>
  </div

为避免这种情况，您可以将组件更改为Attribute指令 。

@Component({
    selector: '[my-sidenav]',
    ...

并像这样使用它：

<div my-sidenav class="android-drawer mdl-layout__drawer"></div> 

看看改变的plunker