与 Angular 2 集成时，Bootstrap Dropdown 和 Bootstrap Tagsinput 不起作用

Posted 2023-03-05

【中文标题】与 Angular 2 集成时，Bootstrap Dropdown 和 Bootstrap Tagsinput 不起作用

【英文标题】：Bootstrap Dropdown and Bootstrap Tagsinput not working when integrating with angular 2

【发布时间】：2017-11-10 15:18:50

【问题描述】：

Bootstrap 下拉代码工作正常（没有 Angular 2），但相同的代码与 Angular 2 集成，它无法按预期工作。

HTML 和 CSS 代码： [下拉菜单有效。]

<div class="collapse navbar-collapse">
     <ul class="nav navbar-nav navbar-right">
         <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                     <i class="ti-user"></i>
                     <p>You can</p>
                     <b class="caret"></b>
               </a>
               <ul class="dropdown-menu">
                 <li><a href="login.html">Login</a></li>
                 <li><a href="signup.html">Signup</a></li>
               </ul>
         </li>
      </ul>
 </div>

---

带有 Angular 2 的 HTML 和 CSS [下拉菜单不起作用。]

<div class="collapse navbar-collapse">
     <ul class="nav navbar-nav navbar-right">
         <li class="dropdown">
               <a class="dropdown-toggle" data-toggle="dropdown">
                     <i class="ti-user"></i>
                     <p>You can</p>
                     <b class="caret"></b>
               </a>
               <ul class="dropdown-menu">
                 <li><a [routerLink]="['/login']">Login</a></li>
                 <li><a [routerLink]="['/signup']">Signup</a></li>
               </ul>
         </li>
     </ul>
 </div>

【参考方案1】：

某些引导元素在 Angular2/4 中不起作用。幸运的是，Angular UI 团队已经在 Angular 组件中构建了 Bootstrap 4 Elements。

Follow these instructions to install

Documentation for dropdown

注意：这是使用 angular 4.0.3 测试的，因此您可能必须找到适用于 angular 2 的版本。

【参考方案2】：

<ul class="dropdown-menu">
                 <li><a routerLink='login'>Login</a></li>
                 <li><a routerLink='signup'>Signup</a></li>
               </ul>

试试这个.. 在最终版本中，routerLink 不应该用作绑定，除非你有路径参数。

然后在路由器文件中

RouterModule.forRoot([
path:"login", component : ,
path: "signup", component: 
])