Question

我已经使用jQuery和HTML编写了一些代码，用于在单击元素后删除一个类。我无法将其转换为Angular 4。

HTML code：

 <div class="collapse navbar-collapse" id="myNavbar">
 <ul class="nav navbar-nav navbar-right">
   <li><a href="#myPage" onclick="hideNavBar();"><i class="glyphicon glyphicon-home"></i>Home</a></li>
   <li><a href="#login" onclick="hideNavBar();">Login</a></li>
   <li><a href="#signup" onclick="hideNavBar();">Signup</a></li>
  </ul>
</div>

JavaScript的：

function hideNavBar() {
  $("#myNavbar").removeClass('in');
}

Answer 1

模板：

<div class="collapse navbar-collapse" *ngIf="test === true">
  <ul class="nav navbar-nav navbar-right">
    <li><a (click)="hideNavBar()"><i class="glyphicon glyphicon-home"></i>Home</a></li>
    <li><a (click)="hideNavBar()">Login</a></li>
    <li><a (click)="hideNavBar()">Signup</a></li>
     </ul>
</div>

.ts文件：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  test = true;

  constructor() {}

  hideNavBar() {
    test = false;
  }
}

Answer 2

使用[ngClass]指令显示和隐藏而不是ngIf。

ngIf在运行时创建DOM   请参阅此文档ngClass

<div class="collapse navbar-collapse" [ngClass]="{'in': showClass}">
 <ul class="nav navbar-nav navbar-right">
  <li><a href="#myPage" (click)="hideNavBar();"><i class="glyphicon 
  glyphicon-home"></i>Home</a></li>
  <li><a href="#login" (click)="hideNavBar();">Login</a></li>
 <li><a href="#signup" (click)="hideNavBar();">Signup</a></li>
</ul>
</div>

    @Component({
     selector: 'app-header',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss']
   })

  export class AppComponent {

  showClass = true;

  constructor() {}

  public function hideNavBar() { // you can use in click function
     showClass = false;
   }
}

如何将jquery代码转换为angular 4？

2 个答案: