Доступ к DOM из машинописного файла - PullRequest
Новая
       6

Доступ к DOM из машинописного файла

0 голосов
/ 16 мая 2018

$('#myModal').modal('show'); $('#myModal').modal('hide'); Это способ, которым мы следуем, чтобы открыть модал из файла js. Сейчас я работаю в angular 5. Как открыть модал из файла .ts? Чтобы было очень ясно, как разговаривать с DOM из файла .ts в angular 5, например, используя document.getElementById("demo"), мы делаем это в файле js. 

<div class=" col-sm-6 clearPadding">
<div class="addBottomPadding">
  <h2>Events</h2>
</div>
<div class="addTopPadding" *ngIf="flagEvent">
  <canvas baseChart [data]="eventPieChartData" [labels]="pieChartLabels" [chartType]="pieChartType" (chartHover)="chartHovered($event)"
    (chartClick)="eventChartClicked($event)" data-toggle="modal" data-target="***********">
  </canvas>
</div>


<div class="col-sm-6 clearPadding">
<div class="addBottomPadding">   
  <h2>Registrants</h2>

</div>
<div class="addTopPadding" *ngIf="flagUser">
  <canvas baseChart [data]="usersPieChartData" [labels]="pieChartLabels" [chartType]="pieChartType" (chartHover)="chartHovered($event)"
    (chartClick)="regChartClicked($event)" data-toggle="modal" data-target="**************">
  </canvas>
</div>

Это мой код. Я написал ***** вместо модальной цели, потому что вызов функции (chartClick)="eventChartClicked($event) имеет 2 условия. Для каждого условия я не хочу открыть модал из моего файла машинописного текста. Здесь я также не могу использовать кнопку.

Ответы [ 2 ]

0 голосов
/ 16 мая 2018

В случае угловых, как правило, модал обычно создается как отдельный компонент многократного использования. Пожалуйста, возьмите следующий пример упаковки модального загрузчика для использования внутри Angular4 в качестве компонента. Аналогичный подход должен работать и для Angular5.

modal.component.html 

<!-- Modal -->
<div class="modal fade" id="{{modalId}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static"
    data-keyboard="false">
    <div id = "setSize" class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <ng-content select="[modal-title]"></ng-content>
                <button id="{{hideId}}" type="button" class="close" data-dismiss="modal" (click)="xClicked()" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>                
            </div>
            <div class="modal-body">
                <ng-content select="[modal-body]"></ng-content>
            </div>
            <div class="modal-footer" *ngIf="options.footer">
                <ng-content select="[modal-footer]"></ng-content>
            </div>
        </div>
    </div>
</div>

modal.component.ts 

import { ModalOptions } from './modal-options';
import { Component, OnInit, OnChanges, Output, EventEmitter, Input } from '@angular/core';

@Component({
  selector: 'modal-component',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.scss'],
  inputs: ['toggle']
})
export class ModalComponent implements OnInit {
  private toggle: EventEmitter<any>;
  @Input() options: ModalOptions = new ModalOptions();
  @Output() onModalClose = new EventEmitter<any>();

  //ADDED TO ADJUST MODAL SIZE FOR TICKER COMPONENT
  @Input() size: string;

  public showId: string;
  public hideId: string;
  public modalId: string;

  constructor() {
    this.showId = this.randomId();
    this.hideId = this.randomId();
    this.modalId = this.randomId();

  }

  ngOnInit() {
    if (this.size == 'large') {
      document.getElementById('setSize').className = "modal-dialog modal-lg"
    }
    this.toggle.subscribe(e => {
      if (e.toLowerCase() === 'show') {
        document.getElementById(this.showId).click();
      } else if (e.toLowerCase() === 'hide') {
        document.getElementById(this.hideId).click();
      }
      //document.getElementById(this.id).click();
    })
  }


  private randomId() {
    let length = 5;
    let chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    var result = '';
    for (var i = length; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)];
    return result;
  }

  xClicked() {
    this.onModalClose.emit();
  }
}

modal.option.ts (просто некоторые функции, которые мне пришлось реализовать, не обязательно) 

export class ModalOptions {
    footer: boolean = true;
    topClose: boolean = false;
}

Использование

some.component.html 

<modal-component [toggle]="modal">
    <div modal-body>

    </div>
    <!--footer-->
    <div modal-footer>
    </div>
</modal-component>

some.component.ts 

export class SomeComponent{
  public modal = new EventEmitter<any>();

  public show(){ this.modal.emit("show"); }

 public hide() { this.modal.emit("hide");}

}

Надеюсь, это поможет.

0 голосов
/ 16 мая 2018

Код, который работает в файле .js, должен работать в файле .ts, поэтому, если вы используете document.getElementById("demo") в своем файле JS, этот фрагмент кода также будет работать в файле машинописного текста.

Например 

<button id="demo" [hidden]="true" data-toggle="modal" data-target="#myModal">Open Modal</button>


document.getElementById("demo").click();

Вы можете обратиться к этому вопросу -

...