Angular2-MaterializeCSS: модальные диалоги не открываются

Я использую Angular2 с materializecss. На данный момент я пытаюсь создать модальные диалоги, которые открываются при нажатии кнопки. Существует также пример в docs https://www.npmjs.com/package/angular2-materialize.

Я также использую materilize-select, который отлично работает, поэтому я предполагаю установку, импорт и т. д. правильно.

проблема в том, что когда я нажимаю модальный триггер, маршрутизатор разрешает новый маршрут "localhost:4200 / #modal1", и я перенаправлено на мою страницу.

Я также попытался заменить href на data-target="modal1" но это не сработало.

могу ли я как-то отключить хэш-ссылки для маршрутизатора? Мои другие маршруты без хэшей.

вот пример из документов npm. Я скопировал эту часть 1:1.

<!-- Modal Trigger -->
<a materialize="leanModal" [materializeParams]="[{dismissible: false}]" class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>A bunch of text</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
  </div>
</div>

любая помощь/советы будут оценены!

Edit: я изменил якорь, чтобы вызвать функцию при нажатии

<a materialize="leanModal" [materializeParams]="[{dismissible: false}]" class="waves-effect waves-light btn modal-trigger" (click)="openModal()>Modal</a>

какие триггеры 

$('#modal1').openModal()

но теперь я получаю ошибку: j.скорость не является функцией

Edit 2:

получил его, чтобы открыть модалы, используя jQuery вместо $. Я все еще получаю ошибку,и приложение застряло после открытия модального.

7
angular javascript materialize modal-dialog router

4 ответов

Я нашел решение. Было довольно неприятно попасть туда, но вот оно:

я переустановил все, что было связано с materialize + angular-cli, будучи angular2-materialize, materialize-css, jquery и hammerjs (который не нужно устанавливать вручную).

затем я последовал инструкции из npmjs на и удалил часть, которая импортирует материал-css в приложении.модуль.ts.

import "materialize-css";

и после этого все работает просто отлично. Нет необходимо изменить настройки webpack в angular2-материализовать пакет или что-нибудь в этом роде. Мои версии:

  • angular-cli 1.0.0-beta.16
  • angular2-материализовать 5.2.1
  • материализовать-css 0.97.7
  • jquery 2.2.4

Я надеюсь, что смогу сэкономить другим людям несколько разочаровывающих часов, которые у меня были с этим.

7

вы можете попробовать использовать open\close программно:

  1. handle (click)="openModal ()" на href
  2. $('#modal1').openModal (); внутри функции openModal ()
  3. удалить href= "#modal1"
  4. С функцией closeModal () с $('#modal1').closeModal();

см.http://materializecss.com/modals.html когда док говорит:

вы также можете открыть модальные глаголы программно, приведенный ниже код сделает ваш модальный открытый документ готовым:

0

сталкиваются с той же проблемой и выше решения не помогают мне в этом, поэтому напишите новый ответ

просто добавить $('.modal').modal(); в конструкторе компонентов.

import ... './stuff'
declare var $: any
@Component{...}
export class EditBlogComponent ...{
   constructor(){
   //Initialize modal here solve my 
   $('.modal').modal();

   }
}
0

Я могу опоздать на это, но вы поместите эти два атрибута в модальный триггер <a> вместо модального .

Я также сделал точно такую же ошибку, как OP, но после прочтения angular2-материализоваться страница тщательно, я исправил свой код, как указано ниже.

вместо

<!-- Modal Trigger -->
<a materialize="leanModal" [materializeParams]="[{dismissible: false}]" class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

вы должны поставить так:

<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

<!-- Modal Structure -->
<div id="modal1" class="modal" materialize="leanModal" [materializeParams]="[{dismissible: false}]"> 
... 
</div>

три пункта, чтобы отметить здесь:

  • нет специальных атрибуты в <a> т. е. триггер
  • на месте materialize="leanModal", это materialize="modal" модель
  • не нужно было удалять import "materialize-css"; в моем случае
0