MaterializeCSS modals 在 Angular2(webpack)应用程序中不起作用

Question

我正在尝试使用模态触发器显示模态，而不是在 OnInit 期间，而是每次启动应用程序时直接显示模态弹出窗口。这是我的组件 .ts

import { Component, OnInit, OnChanges, EventEmitter, } from '@angular/core';
import { Location } from '@angular/common';
import { CompetenceService } from './../../core/services/competence-data.service';
import { Competence } from './../../models/competence';
import { Observable } from 'rxjs/Observable';
import { MaterializeAction } from 'angular2-materialize';
@component({
selector: 'competence',
templateUrl: './template/competence.html',
})
export class competenceComponent implements OnInit {
    competence: Competence;
    competenceliste: Observable<Array<Competence>>;
    constructor(private service: CompetenceService) { }
    ngOnInit() {
        this.competenceliste = this.service.GetFromCV();    
    }
    modalActions = new EventEmitter<string | MaterializeAction>();
    openModal() {
        this.modalActions.emit({ action: "modal", params: ['open'] });
    }
    closeModal() {
        this.modalActions.emit({ action: "modal", params: ['close'] });
    }
    public modifcompetence() {
        this.service.Update(this.competence).subscribe();
        this.competence = null;
        this.competenceliste = this.service.GetFromCV();
    }
    delete(competence: Competence) {
        if (confirm("Voulez-vous vraiment supprimer cette compétence ?")) {
            this.service.Delete(competence).subscribe();
            this.competence = null;
            this.competenceliste = this.service.GetFromCV();
        }
    }
    updateButton(competence: Competence) {
        this.competence = competence;   
    }
}

这是我的html

<button class="btn-floating btn-small waves-effect waves-light grey btnmodif modal-trigger" (click)="openModal()">
      <i class="material-icons">mode_edit</i>
</button>
<div *ngIf="competence">
    <div id="modal1" class="modal" materialize="modal" [materializeParams]="[{dismissible: false}]" [materializeActions]="modalActions">
        <div class="modal-content">
            <h4>Modifier une compétence</h4>
            <div class="input-field col s6">
                <input type="text" class="form-control" id="modifcompetence"
                       required
                       [(ngModel)]="competence.name" name="modifcompetence">
                <label class="active">Nom</label>
            </div>
            <div class="input-field col s6">
                <input type="text" class="form-control" id="modifcompetence"
                       required
                       [(ngModel)]="competence.categorie" name="modifcompetence">
                <label class="active">Catégorie</label>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="waves-effect waves-light btn grey">Annuler</button>
            <button type="button" (click)="modifcompetence()" class="waves-effect waves-light 
                   btn">Modifier</button>
        </div>
   </div>

我正在使用：

• 网络包
• jquery 2.2.4
• 具体化 CSS 0.98.2
• 角度实体化 15.0.8
• 悍马 2.0.4

Answer 1

我在使用Materialize和Angular时遇到了很多问题。不确定您的代码中发生了什么，但您可以使用 https://sherweb.github.io/ng2-materialize/modal 中的代码，这是与 angular 更兼容的具体化。正常工作的模式不需要您实现任何打开或关闭触发器，它自己会这样做。