Question

我试图通过单击菜单图标来加载全宽导航栏。我使用的是angular5。我曾尝试使用角度5+版本中的DOM操作进行谷歌搜索，但它确实令人困惑和复杂。我的问题是关于如何像以前使用普通javascript和JQuery一样使用angular（typescript）更改或操纵这些html元素。我的问题全是关于更改div的宽度，但是我想知道如何使用其他CSS样式和DOM操作技术。

这是我的代码

home.component.html

 <section id="top">
  <div id="menu">
    <a id="toggle" (click)="openMenu()" >
      <i class="fa fa-bars menu-bar" aria-hidden="true"></i>
    </a>
  </div>
  <div id="sidenav" class="overlay" ref="#sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <div class="overlay-content">
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Clients</a>
      <a href="#">Contact</a>
    </div>
  </div>
  <div id="heading">
    <div id="logo">Koa</div>
    <div id="tagline">next generation web framework for node.js</div>
  </div>
</section>

home.component.ts

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

styles.scss

/* You can add global styles to this file, and also import other style files */
@import "~bootswatch/dist/lux/_variables.scss";
@import "~bootstrap/scss/bootstrap.scss";
@import "~bootswatch/dist/lux/_bootswatch.scss";

body {
    background-color: #F5F5F5;
}

//navbar
#menu {
    position: fixed;
    top: 35px;
    right: 42px;
    z-index: 50;
}
#menu a#toggle {
    position: absolute;
    top: 0;
    right: 0;
    padding: 15px;
    background:transparent;
    border-radius: 2px;
    border: 1px solid transparent;
    z-index: 5;
    font-size: 1.3rem;
    color: black;
}
//sidenav 
.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}
//heading or showcase
#heading {
    position: absolute;
    top: 50%;
    margin-top: -150px;
    text-align: center;
    width: 100%;
}
#logo {
    font: 150px 'Italiana', sans-serif;
    text-transform: lowercase;
}
#tagline {
    font-size: 16px;
}

Answer 1

您可以使用[ngClass]="{'scssClassName': condition}"在div上调节类的附加条件，如下所示：

<div class="existingClassWithNormalWidth" [ngClass]="{'scssClassNameWithFullWidth': condition}">{{childTags}}</div>。

您还可以在相同的标签上为不同的条件提供不同的类，例如：[ngClass]="{'scssClassName': condition, 'scssClassName2': condition2, 'scssClassName3': anyBooleanVariable,}"

您可以通过单击按钮将条件（或布尔值）设置为true。 Angular会自动将该类附加到div本身。

您也可以仅使用[ngStyle]来表示全角，但是，如果要提供额外的样式，则最好为SCSS创建一个类并使用[ngClass]。

查找课程https://angular.io/api/common/NgClass的官方文档（如果您想添加课程）

仅查找样式https://angular.io/api/common/NgStyle的官方文档（如果只想使用ngStyle进行全宽显示）

如何通过单击按钮更改角度5中div的宽度或其他CSS样式？

1 个答案: