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

Question

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

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

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

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

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

Вот пример из npm docs. Я скопировал эту часть 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.velocity is not a function

Edit 2:

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

Answer 1

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

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

Затем я выполнил инструкцию от npmjs и удалил часть, которая импортирует материал-css в app.module.ts.

import "materialize-css"; 

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

• угловой кли 1.0.0-beta.16
• angular2-материализовать 5.2.1
• материализовать-CSS 0.97.7
• JQuery 2.2.4

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

Answer 2

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

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

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

You can also open modals programatically, the below code will make your modal open on document ready:

Answer 3

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

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

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

    } 
} 

Answer 4

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

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

Вместо этого

<!-- 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", он находится в модальный
• не нужно, чтобы удалить import "materialize-css"; в моем случае