typescript – 如何初始化angular2 materialize组件？

发布时间：2020-12-17 17:22:07 所属栏目：安全来源：网络整理

导读：我刚开始使用angular2 materialize,CSS组件工作正常.但是,当我包含需要初始化的组件(例如select)时,我不知道如何或在何处执行此操作. 这是我的表格的片段： div class="input-field col s12" select option value="" disabled selectedChoose your option/op

我刚开始使用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();
    }
}

解决方法

添加属性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>

The MaterializeDirective attribute directive (materialize) accepts any MaterializeCSS initialization call to apply to the element. The list of supported functions are provided by MaterializeCSS. Examples: collapsible,leanModal,tooltip,dropdown,tabs,material_select,sideNav,etc.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!