Question

我想通过导航栏上的按钮实例化一个名为login.component的组件ng2-bs3-modal。唯一的问题是两个组件没有关联，所以我不确定如何连接它们。

以下是导航栏上按钮的html：

        <li class="nav-item">
            <button type="button" class="as-text nav-link 
            text-uppercase" data-toggle="modal" data-target="#myModal">
                login
            </button>
        </li>

此刻它并没有连接到我的angular 2 login.component。它连接到一个常规模态，硬编码到index.html。我正在转换使用ng2-bs3-modal。如何点击导航栏中的html按钮来实例化我的login.component？

这是我的login.component.html（现在只是最基本的模式）：

<button type="button" class="btn btn-default" (click)="modal.open()">Open me!</button>//*******!!!!! please not this button will be deleted

<modal #modal>
    <modal-header [show-close]="true">
        <h4 class="modal-title">I'm a modal!</h4>
    </modal-header>
    <modal-body>
        Hello World!
    </modal-body>
    <modal-footer [show-default-buttons]="true"></modal-footer>
</modal>

login.component.ts：

import { Component, ViewContainerRef, ViewEncapsulation } from '@angular/core';
import { MODAL_DIRECTIVES } from 'ng2-bs3-modal/ng2-bs3-modal';

@Component({
  selector: 'login',
   templateUrl: 'app/shared/login.component.html',
   styleUrls: ['app/shared/login.component.css' ],
   directives: [MODAL_DIRECTIVES]
})
export class LoginComponent {}

这是我的完整navbar.component.html：

<nav class="navbar navbar-dark navbar-fixed-top text-uppercase">
    <div class="container-fluid">
        <button     class="navbar-toggler hidden-md-up pull-xs-right" 
                    type="button" 
                    data-toggle="collapse" 
                    data-target="#nav-content">
                    &#9776;
        </button>
        <a class="navbar-brand" [routerLink]="['/']" 
        routerLinkActive="active">vepo</a>
        <div class="collapse navbar-toggleable-sm" id="nav-content">
            <ul class="nav navbar-nav pull-xs-right">
                <li class="nav-item">
                    <a class="nav-link" [routerLink]="['/about']" 
                    routerLinkActive="active">about</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" [routerLink]="['/find']" 
                    routerLinkActive="active">find</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" [routerLink]="['/add']" 
                    routerLinkActive="active">add</a>
                </li>
                <li class="nav-item">
                    <button type="button" class="as-text nav-link 
                    text-uppercase" data-toggle="modal" data-target="#myModal">
                        login
                    </button>
                </li>
                <li class="nav-item">
                    <a class="nav-link signup" [routerLink]="['/register']" 
                    routerLinkActive="active">sign up free</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

navbar.component.ts：

import { Component, ViewChild } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { LoginComponent } from './login.component';
@Component({
    selector: 'navbar',
    templateUrl: 'app/shared/navbar.component.html',
    styleUrls: ['app/shared/navbar.component.css'],
    directives: [ROUTER_DIRECTIVES, LoginComponent]
})
export class NavbarComponent { 
}

这是我的尝试：

将导航栏按钮html更改为此，并在<navbar>下添加login.component html选择器：

                <li class="nav-item">
                    <button type="button" class="as-text nav-link 
                    text-uppercase" (click)="modal.open()">
                        login
                    </button>
                </li>
                <li class="nav-item">
                    <a class="nav-link signup" [routerLink]="['/register']" 
                    routerLinkActive="active">sign up free</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<login #modal></login>

在navbar.component中添加#modal作为viewChild：

import { Component, ViewChild } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { LoginComponent } from './login.component';
@Component({
    selector: 'navbar',
    templateUrl: 'app/shared/navbar.component.html',
    styleUrls: ['app/shared/navbar.component.css'],
    directives: [ROUTER_DIRECTIVES, LoginComponent]
})
export class NavbarComponent { 
    @ViewChild('modal') modal;
}

出现此错误：

TypeError：self._LoginComponent_48_4.open不是函数

因为open不是login.component.ts的函数，它是模态插件的函数。

如何在单击导航栏中的按钮时正确实例化login.component模式？

Answer 1

将导航栏html更改为：

            <li class="nav-item">
                <button type="button" class="as-text nav-link 
                text-uppercase" (click)="openModal()">
                    login
                </button>
            </li>
            <li class="nav-item">
                <a class="nav-link signup" [routerLink]="['/register']" 
                routerLinkActive="active">sign up free</a>
            </li>
        </ul>
    </div>
</div>

navbar.component.ts：

export class NavbarComponent { 
    @ViewChild('modal') modal;

    openModal() {
        this.modal.open();
    }
}

login.component.ts：

export class LoginComponent {
  @ViewChild('modal') modal;

  open() {
    this.modal.open();
  }

}

login.component.html：

<modal #modal>
    <modal-header [show-close]="true">
        <h4 class="modal-title">I'm a modal!</h4>
    </modal-header>
    <modal-body>
        Hello World!
    </modal-body>
    <modal-footer [show-default-buttons]="true"></modal-footer>
</modal>

从导航栏按钮单击实例化ng2-bs3-modal组件

1 个答案: