语义2下拉角度2不起作用答案

【问题标题】：Semantic 2 Dropdown angular 2 not working语义2下拉角度2不起作用
【发布时间】：2020-06-01 19:20:57
【问题描述】：

EDIT - 1 - 根据建议在课堂上实施AfterViewInit。

我正在尝试查找问题，但无法找到。我使用了一个简单的下拉菜单并已导入（我相信如此）所有语义配置，但下拉菜单无法正常工作。我认为css正在被应用，但动画没有。我真的很困惑，非常感谢任何帮助。

它在

处给出错误

 ngAfterViewInit(){
    $('.ui.dropdown').dropdown();
  }

以下是应用程序的详细信息。

Index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Demo</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

<link rel="stylesheet" type="text/css" href="../semantic/dist/semantic.min.css">
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
<script src="../semantic/dist/semantic.min.js"></script>
<script src="../semantic/dist/components/dropdown.js"></script>

</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

Module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { MaterialModule,MdButtonModule} from '@angular/material';
import 'hammerjs';
import { AppComponent } from './app.component';
import { ScripttableComponent } from './scripts/scripttable/scripttable.component';
import { ScriptsComponent } from './scripts/scripts.component';

@NgModule({
  declarations: [
    AppComponent,
    ScripttableComponent,
    ScriptsComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterialModule,
    BrowserAnimationsModule,
    MdButtonModule

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

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

import {$} from 'jquery';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  title = 'app works!';

  ngAfterViewInit(){
    $('.ui.dropdown').dropdown();
  }


}

app.component.html

   <select name="Program" id="program" class="ui search dropdown">
        <option value="">Program</option>
        <option value="eCQMs">eCQMs</option>
        <option value="Mips">Mips</option>
        <option value="Pqrs">Pqrs</option>
      </select>

- 应用文件夹-

控制台错误

【问题讨论】：

AppComponent 需要实现 AfterViewInit。另外，在 chrome 控制台中，试试这个 $().dropdown() 看看它是否有效。如果不这样做，请创建一个 plunker 进行复制。
实施的AfterViewInit 不起作用。在控制台中做了$('.ui.dropdown').dropdown(); 并且有效。
请更新您的问题，为了让 mgAfterviewInit 工作，您的班级必须实现 AfterViewInit。我很惊讶它一开始就被解雇了。
你有两个版本的jquery吗？ https://code.jquery.com/jquery-3.1.1.min.js 和 import {$} from 'jquery'; 第二个版本没有实现 dropdown 插件
我在这里创建了一个简单的 plunker：plnkr.co/edit/9vJpEyOc532nLDimiZoQ?p=preview。一切似乎都运行良好.. 我将 css 和 js 添加到 index.html。你可以试试declare var $: any 而不是 import {$} from 'jquery';

标签： angular semantic-ui

【解决方案1】：

如果你正在寻找带有 angular-cli 的 webpack 配置语义 ui，你可以试试这个：

index.html

  <link rel="stylesheet" type="text/css" href="../semantic/dist/semantic.min.css">
</head>
<body>
  ...

polyfills.ts

import $ from 'jquery'
window['jQuery'] = $;

declare let require: any;

require("../semantic/dist/semantic.min.js");
require( "../semantic/dist/components/dropdown.js");

app.component.ts

import $ from 'jquery'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  ngAfterViewInit(){
    $('.ui.dropdown').dropdown();
  }
}

【讨论】：

【解决方案2】：

https://edcarroll.github.io/ng2-semantic-ui/#/getting-started

您需要对 Angular 项目使用 Angular 语义。

【讨论】：