如何初始化angular2 materialize组件?

时间:2016-07-06 14:13:51

标签: typescript angular materialize

我刚开始使用angular2 materialize,CSS组件工作正常。但是,当我包含需要初始化的组件(例如select)时,我不知道如何或在何处这样做。

这是我的表格片段:

<div class="input-field col s12">
    <select>
        <option value="" disabled selected>Choose your option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
    <label>Materialize Select</label>
</div>

我的组件看起来像这样:

import {Component, ElementRef, Inject, OnInit} from '@angular/core';
import {MaterializeDirective} from "angular2-materialize";

declare var jQuery:any;

@Component({
    selector: 'bsi-signup',
    styleUrls: ['assets/styles/app.component.css'],
    templateUrl: 'assets/templates/signup.component.html',
    directives: [MaterializeDirective],
    providers: []
})

export class SignupComponent implements OnInit {
    elementRef: ElementRef;

    constructor(@Inject(ElementRef) elementRef: ElementRef) {
        this.elementRef = elementRef;
}

    ngOnInit() {
        jQuery(this.elementRef.nativeElement).find('select:not([multiple])').material_select();
    }
}

2 个答案:

答案 0 :(得分:6)

添加属性materialize="material_select"

<select materialize="material_select">
    <option value="" disabled selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>
<label>Materialize Select</label>
  

MaterialiseDirective属性指令(materialize)接受任何MaterializeCSS初始化调用以应用于该元素。 MaterialiseCSS提供了支持的功能列表。示例:可折叠,leanModal,工具提示,下拉列表,制表符,material_select,sideNav等。

来源:https://www.npmjs.com/package/angular2-materialize

答案 1 :(得分:1)

大家好!这项工作形成了我:

ex.getErrorCode()