语义 2 下拉菜单 angular 2 不工作

Question

编辑 - 1 - 根据建议在 class 中实施 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>

- 应用程序文件夹 -

控制台错误

Answer 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();
  }
}

Answer 2

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

You need to use Angular semantic for angular projects.

语义 2 下拉菜单 angular 2 不工作

Semantic 2 Dropdown angular 2 not working

semantic-ui

angular