Angular 6 вызывает всплывающее диалоговое окно ng boostrap от navbar routerlinklink - PullRequest
Новая
       19

Angular 6 вызывает всплывающее диалоговое окно ng boostrap от navbar routerlinklink

0 голосов
/ 17 октября 2018

Я пытаюсь открыть всплывающее модальное диалоговое окно ng-bootstrap из моей панели навигации, в котором используются ссылки на маршрутизаторы.Я прошел учебник по адресу ng-bootstrap.github.io.Я создал новый компонент и добавил пример кода.Однако вместо кнопки на веб-странице мне нужно вызвать модальное всплывающее окно из моей ссылки на маршрутизатор navbar, которая находится в моем header.component.html.Любая помощь очень ценится.

component.html код: 

<ng-template #content let-c="close" let-d="dismiss">
    <div class="modal-header">
      <h4 class="modal-title" id="modal-basic-title">Hi there!</h4>
      <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>Hello, World!</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="c('Save click')">Save</button>
    </div>
  </ng-template>

  <button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>

component.ts код: 

import { Component } from '@angular/core';
import { NgbModalConfig, NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
  providers: [NgbModalConfig, NgbModal]
})
export class LoginComponent {

  constructor(config: NgbModalConfig, private modalService: NgbModal) {
    // customize default values of modals used by this component tree
    config.backdrop = 'static';
    config.keyboard = false;
  }

  open(content) {
    this.modalService.open(content);
  }
}

в моем header.component.html, я получилцикл для итерации каждой ссылки на маршрутизатор, но я знаю, что мне нужно избавиться от цикла и явно написать каждую ссылку на маршрутизатор. 

    <li routerLinkActive="active" *ngFor="let menuItem of menuItems" class="{{menuItem.class}} nav-item">
                                    <a class="nav-link" [routerLink]="[menuItem.path]">

                                        <a> {{menuItem.title}}</a>
                                    </a>
                                </li>
<!-- <a href="#" data-toggle="modal" data-target="#login" class="btn btn-primary btn-md navbar-btn ml-0 ml-md-4">Login </a>  -->
                            </ul>
...