MaterializeCSS模态在Angular2（webpack）应用中不起作用

Question

I am trying to display modals with a modal-trigger and not during OnInit, but every time when I start my application the modal pop-up directly. Here's my component .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;   
    }
}

And here's my 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>

I am using:

• webpack
• jquery 2.2.4
• materializecss 0.98.2
• angular-materialize 15.0.8
• hummerjs 2.0.4

Answer 1

I have run into many issues when using Materialize and Angular. Not sure what happened in your code, but you can use this the code from https://sherweb.github.io/ng2-materialize/modal , which is a more compatible materialize for angular. A modal that works properly won't need you to implement any open or close trigger, it does that itself.