Angular Material MdSidebar-如何从打字稿中调用.toggle（）

尼古拉斯·弗登（Nicholas Foden）

我正在尝试从另一个组件进行sidenav切换，但是当从我的父组件调用.toggle（）函数时，它将引发此错误：

AppComponent.html：1错误TypeError：AppComponent.webpackJsonp.176.AppComponent.toggleNav中的this.sidenav.toggle不是函数（app.component.ts：25）

这是代码：app.component.ts

import { Component, ViewChild } from '@angular/core';
import { MaterialModule } from '@angular/material';
import { NavComponent } from './nav/nav.component';
import { SidebarComponent } from './sidebar/sidebar.component';
import { FooterComponent } from './footer/footer.component';
import { MdSidenav } from '@angular/material';
@Component({
    moduleId: module.id,
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent{
    title = 'CRS Management App';
    @ViewChild('sidenav') sidenav:MdSidenav;
    toggleNav(){
      this.sidenav.toggle();
    }
}

app.component.html：

<app-nav #navbar (nav)="toggleNav()"></app-nav>
<app-sidebar #sidenav></app-sidebar>
<app-footer></app-footer>

（nav）从app-nav组件发出。

sidebar.component.ts：

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.scss']
})
export class SidebarComponent {
    title = 'CRS';

  constructor() { }

}

sidebar.component.html：

 <md-sidenav-container class="container">
<!--SIDEBAR -->
    <md-sidenav #sidebar class="sidebar" mode="over" opened="true">

        <!-- MENU https://material.angular.io/components/component/list -->
         <div class="nav-links">
            <md-nav-list> <!--TODO Links -->
               <a md-list-item href="/one"> Option </a> <!--TODO Icon -->
               <a md-list-item href="/two"> Option </a> <!--TODO Icon-->
               <a md-list-item href="/three"> Option </a> <!--TODO Icon-->
               <span class="flex"></span><!--TODO Divider-->
               <a md-list-item href="/four"> _______ </a> <!--TODO Icon-->
               <a md-list-item href="/five"> Option </a> <!--TODO Icon -->
               <a md-list-item href="/six"> Option </a> <!--TODO Icon-->
               <a md-list-item href="/seven"> Option </a> <!--TODO Icon-->
               <a md-list-item href="/eight"> Option </a> <!--TODO Icon-->
            </md-nav-list>
        <!-- SETTINGS -->
            <!--TODO link to settings -->
            <!--TODO Convert to md-list-item -->
            <button md-button class="md-icon-button" aria-label="Settings">
                Settings<md-icon>settings</md-icon> 
            </button>
        <!-- SETTINGS END -->
        </div>

    </md-sidenav>
<!-- SIDEBAR ENDS -->
<router-outlet></router-outlet>
</md-sidenav-container>

我尝试使用AfterViewInit，它会抛出：

错误TypeError：this.sideNav.toggle不是AppComponent.webpackJsonp.176.AppComponent.toggleNav的函数（http://127.0.0.1:4200/main.bundle.js:171:22）

周杰伦

AppComponent上的模板ref #sidenav指的是没有切换功能的SidebarComponent。

您可以向其中添加一个，然后调用sidenav.toggle（），然后从AppComponent进行调用。

sidebar.component.ts

  import { Component, OnInit, ViewChild } from '@angular/core';
  import { MatSidenav} from '@angular/material';

  @Component({
    selector: 'app-sidebar',
    templateUrl: './sidebar.component.html',
    styleUrls: ['./sidebar.component.css']
  })
  export class SidebarComponent implements OnInit {
    title = 'CRS';
    @ViewChild('sidenav') sidenav: MatSidenav;
    constructor() { }

    ngOnInit() {
    }

    toggle() {
      this.sidenav.toggle();
    }
  }

sidebar.component.html

  <md-sidenav-container class="container">
    <md-sidenav #sidenav class="sidebar" mode="over" opened="true">
    ...

    </md-sidenav>      
 </md-sidenav-container>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。