Question

编辑 - 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>

- 应用文件夹 -

控制台误差

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

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

语义2下拉角2不起作用

2 个答案: