Настройка классов начальной загрузки в разработке Angular - PullRequest
Новая
       28

Настройка классов начальной загрузки в разработке Angular

0 голосов
/ 20 сентября 2018

Я использую bootstrap 4 и sass при разработке приложений для angular 6.

Я пытаюсь создать навигационную вкладку в своем приложении, немного настроив загрузочные навигационные вкладки, класс nav-link.Тем не менее, настроенный класс начальной загрузки не отражает.Итак, мой вопрос: можем ли мы настроить класс начальной загрузки при разработке нашего углового приложения?Если так, как мы можем это сделать?Ниже приведен фрагмент кода моего углового компонента.

myComponent.html: 

<div class="profile-head">
    <h5>
       Sreehari
    </h5>
    <h6>
       Developer
    </h6>

    <ul class="nav nav-tabs" id="myTab" role="tablist">
       <li class="nav-item">
          <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">About</a>
       </li>
       <li class="nav-item">
          <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
       </li>
    </ul>
</div>

Обновлено: моя главная проблема в том, что когда я нажимаю на вкладки «О программе и профиле», синяя рамка внизу должна переходить на активную вкладку.Однако он вообще не перемещается.

myComponent.scss: 

.profile-head {
h5 {
    color: #333;
}

h6{
    color: #0062cc;
}

p{
    font-size: 12px;
    color: #818182;
    margin-top: 5%;
    span{
        color: #495057;
        font-size: 15px;
        font-weight: 600;
    }
}

.nav-tabs{
    margin-bottom:5%;

    .nav-link{
        font-weight:600;
        border: none;
        &.active{                
            border: none;
            border-bottom:2px solid #0062cc;
        }
    }
}

}

Я импортировал загрузчик в моем файле styles.scss, как показано ниже. 

@import "../node_modules/bootstrap/scss/bootstrap";

1 Ответ

0 голосов
/ 20 сентября 2018

Ваш стиль уже хорошо импортирован.Но вы не можете переключаться между оператором active, потому что при начальной загрузке для переключения классов нужны Jquery и bootstrap.js.

Чтобы сделать маршрутизацию с активным оператором в угловых для ваших вкладок.Либо используйте Jquery и BootstrapJs в своем проекте ( не рекомендуется ), либо создайте свою логику в component.ts. Вот пример того, как вы можете это сделать: Маршрутизируемые вкладки начальной загрузки Twitter, созданные с помощьюУгловой

...