小编Edd*_*rro的帖子

所以我有两个组件……一个 Navbar 组件和一个 AboutPage 组件。

它们都在同一个目录中，“应用程序”

应用程序

--导航栏 --> Navbar.css, Navbar.js

-- AboutPage --> Aboutpage.css, Aboutpage.js

如您所见，它们有两个单独的样式表。在 JS 页面中，正确的 CSS 文件也被导入。

例如，当我做这样的风格时：

导航栏组件

p { background: red }

^^ 这种风格也适用于关于页面中的 p。我什至试图将 Aboutpage 中的 P 设为其 on id 并以这种方式设置样式，但它仍然失败。

所以我的目标是为单个 li 的子元素创建一个 mouseenter/mouseexit 事件。对于我的应用程序，当用户鼠标进入 li 元素时，它的子元素div class='thumbs'通过名为“hover”的组件布尔属性添加到 DOM -- *" ngIf='hover'"

我的问题是，当我鼠标悬停在单个 li 元素上时，会显示所有拇指图标，而不仅仅是单个 li 的拇指图标。

这是一个视频，突出了我的问题：

HTML：

<ul> <!-- Each song on the album -->
    <li class="song-block"
        *ngFor='let song of songsToDisplay'
        (click)="getSong(song)"
        (mouseenter)="hoverStateIn()"
        (mouseleave)="hoverStateOut()">
      <div class="song-card"
           (click)="addPlay(song)">
        <p *ngIf="!song.isPlaying"
            class="song-number">{{song.tracknumber}}</p>
        <i *ngIf="song.isPlaying" class="fa fa-play"></i>
        <p class="song-name">{{song.name}}</p>
        <p class="song-length">{{song.length}}</p>
        <div class="thumbs"
             *ngIf="hover"> <!-- Thumbs section -->
          <i class="fa fa-thumbs-up"></i>
          <i class="fa fa-thumbs-down"></i>
        </div>.....
     </ul>

打字稿：

hover: boolean = false;

  hoverStateIn(){
    this.hover = true
  }

  hoverStateOut(){
    this.hover = …

所以我有一个输入：

<input id='search'placeholder="Search" formControlName='search'
       (click)="toggleDropDown()" type='text' novalidate>

当你点击它时，它会显示一个“下拉”菜单：

<div *ngIf="showDropDown"
           class="search-bar-results">
        <li
          *ngFor="let x of searchItems | filter: getSearchValue()"
          (click)="selectValue(artist)">
            <img src="{{x.image}}"
                 alt="search result artist image"
                 class="search-bar-image">
            <p>{{x.name}}</p>
            <p>{{x.type}}</p>
        </li>
      </div>

这是打字稿：

showDropDown = false;

toggleDropDown() {
    this.showDropDown = !this.showDropDown;
    console.log('clicked');
  }

当用户点击输入时，下拉菜单会出现在 DOM / 屏幕上。到目前为止，我只能通过单击输入本身来关闭下拉菜单，但我正在尝试找到一种通过单击其他位置来关闭菜单的方法。