Как инициализировать компонент для измерения угла?

Question

Я только начал работать с использованием angular2, а компоненты 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(); 
    } 
} 

Answer 1

добавить атрибут 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> 

MaterializeDirective директиву атрибута (материализовать) accep ts любой запрос инициализации MaterializeCSS для применения к элементу. Список поддерживаемых функций предоставляется MaterializeCSS. Примеры: сборно-разборные, leanModal, подсказка, выпадающий, вкладки, material_select, sideNav и т.д.

Источник: https://www.npmjs.com/package/angular2-materialize

Answer 2

Привет каждый !!! это работает образуют меня:

import { Component, OnInit } from '@angular/core'; 
 

 
declare var Materialize:any; //we declarate the var Materialize for use 
 

 
@Component({ 
 
    //your code 
 
}) 
 
export class MyComponentComponent implements OnInit { 
 

 
    constructor() { 
 
    //your code 
 
    } 
 

 
    ngOnInit() { 
 
    // your code 
 
    } 
 

 
    ngAfterViewChecked(){ // Respond after Angular initializes the component's views and child views. 
 
    Materialize.updateTextFields();// update de fields when the document and the views a are ready 
 
            // in case that the inputs are empty 
 
    } 
 

 
    updateInformation(){ 
 
    // your code ... 
 
    Materialize.updateTextFields(); // update the fields, 
 
            // is not necesary add the class="active" in the views 
 
    } 
 

 

 

 
}