Question

我一直在研究一个名为SpotusX的类似Spotify的新项目

首先，我刚刚创建了网站的HTML和CSS布局。然后我想将其移至Angular。但是，复制和粘贴后，我只得到一个空白页，没有任何组件。他们只是消失了。

这是我的应用程序组件。 HTML

<div id="wrapper">

  <div id="main">
    <app-navbar></app-navbar>
    <div id="content">
      <app-albums>Loading...</app-albums>
    </div>
  <div class="player fixed">
    <div class="progress-bar">
      <span class="active-progress"></span>
    </div>
    <a href="#">
      <div class="song-cover">
        <img src="../assets/images/img1.jpeg">
      </div>
      <div class="song-details">
        <ul>
          <li class="artist-name">Ed Sheeran</li>
          <li class="song-name">Happier</li>
        </ul>
      </div>

    </a>
    <div class="main-action">
      <div class="btn-group">
        <button><i class="fas fa-step-backward"></i></button>
        <button><i class="fas fa-play"></i></button>
        <button><i class="fas fa-step-forward"></i></button>
      </div>
    </div>
    <div class="other-action">
      <div class="btn-group">
        <button><i class="fas fa-random"></i></button>
        <div class="volume-bar">
          <span class="volume"></span>
        </div>
        <button><i class="fas fa-step-forward"></i></button>
      </div>
    </div>

  </div>

</div>

这是我的app.component.css

* {
    box-sizing: border-box;
}
/*
#main{
    display: grid;
    grid-template-areas: 
        "navbar main"
        "navbar main"
    ;
}

app-navbar{
    grid-area: navbar;
}

#content{
    grid-area: main; 
} */

/* Here goes player styles */

.player{
    z-index: 1000;
    position: fixed;
    bottom: 0%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    background: var(--primary);
    color: white;
    min-height: 70px;
    align-items: center;
}

.progress-bar{
    grid-column: 300px;
    height: 5px;
    cursor: pointer;
    background: var(--secondary-color);
    transition: all .3s ease-out;
    grid-column: 1/-1;
}

.progress-bar:hover{
    height: 15px;
}

.active-progress{
    background: var(--purple);
    height: 100%;
    display: block;
    width: 20%;
    border-radius: 0 20px 20px 0;
}

.song-cover, .song-cover img{
    height: 75px;
    margin:0;
}

.song-cover, .song-details{
    display: inline-block;
    vertical-align: middle;
}

.song-details ul{
    margin: 0;
    list-style: none;
    font-size: 14px;
    color: var(--secondary-color);
}

.song-details .song-name{
    color: #bbb;
    font-size: 16px;
    font-weight: 600;

}

.main-action > .btn-group button{
    width: 50px;
    background: var(--primary);
    border: 0;
    color:#aaa;
    font-size: 17px;
    font-family: 'Roboto';
}

.main-action > .btn-group > button:nth-child(2n){
    border: 1px solid #bbb;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    overflow: hidden;
    transform: scale(0.98);
    transition: all .1s ease;
}

.main-action > .btn-group > button:hover{
    transform: scale(1);
    color: #eee;
}

.main-action{
    justify-self: center;
}

.other-action{
    justify-self: end;
}

.volume-bar{
    display: block;
    width: 200px;
    background: var(--light-black);
    height: 5px;
    border-radius: 5px;
}

.volume{
    display: block;
    width: 50%;
    background: var(--purple);
    height: 100%;

}

Answer 1

这取决于您将应用程序脚本放在何处。尝试在您的某些CSS前面添加/deep/。所有的角度文件都被容器化在它们自己的对象名称空间中。

对于网站范围的样式，通常我直接在index.html标头中添加一个style.css

Answer 2

尝试阅读控制台日志并检查错误消息

迁移到Angular后没有出现Angular组件

2 个答案: