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>

我正在使用：

的WebPack
jquery 2.2.4
materializecss 0.98.2
angular-materialize 15.0.8
hummerjs 2.0.4

Answer 1

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

MaterializeCSS模式在Angular2（webpack）应用程序中不起作用

1 个答案: