Question

我将在angular2组件上使用一些semantic-ui behaviors。

我尝试了一些像ng2-semantic-ui这样的集成，但不幸的是，它目前不支持“可见性行为”，我应该手动实现，但正如我们已经知道的那样，我们无法使用<script>角度模板上的标签，所以我不能手动调用语义ui函数。

您有什么建议可以解决这个问题吗？

Answer 1

只需在index.html文件中包含Semantic-UI（这将使所有模块适用于所有模板）：

PS：<script>标记适用于index.html文件。

    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/semantic.min.js"></script>
<!--or -->
    <script src="relaive_path_to/semantic.min.js"></script>

在your.component.ts文件中，在declare var $: any;中添加以下内容：导出部分旁边的ngAfterViewInit(){}，然后初始化可见性行为，如下所示：

[DEMO] （重新运行它以查看带有可见性行为的延迟加载图片）

<强> component.ts

import {Component,OnInit} from 'angular2/core';
declare var $: any;
@Component({
    selector: 'my-app',
    templateUrl: 'demo.html',
})
export class AppComponent implements OnInit { 

    ngAfterViewInit(){

$('.demo.items .image img')
  .visibility({
    type       : 'image',
    transition : 'fade in',
    duration   : 1000
  })
;
    }
}

如果您只想使用特定模块，请参阅Way to import small parts of Semantic-UI。

在angular2中使用semantic-ui行为

1 个答案: