属性'_elementRef‘在'ElementRef<any>’类型上不存在

Question

我试图移动一个按钮与边栏，因为它是打开的。我使用ElementRef获取组件，并使用Typescipt手动操作它。但是，虽然我看到_elementRef是元素的一部分，但在类型‘ElementRef’上不存在错误属性'_elementRef‘。我还认为更改它是自动的，但它似乎不起作用。

TS

import { Component, ViewChild, ElementRef, Renderer2 } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('toggle', {static: false}) toggle: ElementRef;

  constructor(
    private renderer: Renderer2) { }

  toggleButton() {
    console.log(this.toggle);
    this.toggle._elementRef.nativeElement.style.marginLeft = "50px";
  }
}

html

<mat-drawer-container class="example-container" autosize>

  <mat-drawer #drawer class="example-sidenav" mode="over" opened=false>

    <nav class="navbar navbar-light bg-light">
      <ul class="navbar-nav navbar-collapse" id="navbarSupportedContent">
        <li class="nav-item">
          <a class="nav-link" [routerLink]="['/home']">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" [routerLink]="['/about']">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" [routerLink]="['/services']">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" [routerLink]="['/contact']">Contact</a>
        </li>
      </ul>
    </nav>
  </mat-drawer>
      <button mat-raised-button color="primary" (click)="drawer.toggle(); toggleButton()" id="toggleButton" #toggle>
        <p class="menu"></p>
      </button>
</mat-drawer-container>
<app-navbar></app-navbar>
<router-outlet></router-outlet>

css

@media only screen and (max-width: 767px) {
  #toggleButton{
    position: fixed;
    z-index: 500;
    margin-left: 40vw;
  }
  .menu{
    margin-top: 50%;
    height: 4vh;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' aria-labelledby='title' aria-describedby='desc' role='img' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EMenu%3C/title%3E%3Cdesc%3EA line styled icon from Orion Icon Library.%3C/desc%3E%3Cpath data-name='layer2' fill='none' stroke='%23202020' stroke-miterlimit='10' stroke-width='2' d='M2 8h60v8H2zm0 20h60v8H2z' stroke-linejoin='round' stroke-linecap='round'%3E%3C/path%3E%3Cpath data-name='layer1' fill='none' stroke='%23202020' stroke-miterlimit='10' stroke-width='2' d='M2 48h60v8H2z' stroke-linejoin='round' stroke-linecap='round'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
  }

mat-drawer{
  position: fixed;
}

  nav{
    width: 40vw;
  }

  nav ul {
    list-style-type: none;
  }

  nav ul li{
    font-size: 3vh;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: center;
  }
  nav ul li a{
    color: rgb(0, 0, 0);
  }

  .contact-button{
    display:none;
  }
}

Answer 1

您不应该使用_elementRef。您应该直接使用nativeElement，如下所示，

toggleButton() {
    console.log(this.toggle);
    this.toggle.nativeElement.style.marginLeft = "50px !important";
}