我想访问在*.component.html中定义的sidenav,这样我就可以动态地控制它的模式(over | push | side)基于属性,如屏幕宽度。
如何访问
下面的md-sidenav<div class='layout-header'>
<md-sidenav-layout fullscreen>
<md-sidenav mode="side" #sidenav>
<md-nav-list>
<md-list-item>Blah</md-list-item>
</md-nav-list>
</md-sidenav>
...
</div>
从*.component.ts中定义的组件?
@Component({
selector: 'layout-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css'],
directives: [
MD_SIDENAV_DIRECTIVES,
MD_LIST_DIRECTIVES,
MD_CARD_DIRECTIVES,
MdToolbar,
MdButton,
MdInput,
MdCheckbox,
MdRadioGroup,
MdRadioButton,
MdIcon
],
providers: []
})
export class HeaderComponent {
}
我现在
你可以试试属性绑定:
<md-sidenav [attr.mode]="sidenavMode" #sidenav>
在你的组件中你有一个可以设置的成员变量:
export class HeaderComponent {
sidenavMode: string = 'side';
}
好了,你需要像这样绑定组件属性:
<md-sidenav [mode]="{{sidenavMode}}" #sidenav>