Question

我看了一些例子，因此标题有差异＆＃39;加入。

在示例中，模态加载到父组件的自定义标签中：即

＆＃13;

  template: `
  <div class="container-fluid">
    <template ngbModalContainer></template>
    <ngbd-modal-component (notifyParent)="getNotification($event)"></ngbd-modal-component>
  </div>
  `

＆＃13;

但我没有自定义标签。模态完美地加载到我想要它的身体。

这是home.component.html

＆＃13;

<nav class="navbar navbar-dark bg-primary navbar-expand-md justify-content-between fixed-top">
    <div class="navbar-brand mr-auto">
                <a class="navbar-brand" title="appChoser" href="appChooser" target="_self" >
                    <span class="glyphicon glyphicon-menu"></span>
                </a>

            <a class="navbar-brand logo" title="" routerLink="/dashboard" rel="home"></a>
        </div>
        <button type="button" class="navbar-toggler" data-toggle="collapse" (click)="isCollapsed = !isCollapsed"  [attr.aria-expanded]="!isCollapsed" data-target="#bs-navbar-collapse" >
                <span class="sr-only">Toggle navigation</span>
                <span class="glyphicon glyphicon-ellipsis"></span>
        </button>


        <div class="collapse navbar-collapse" [ngbCollapse]="isCollapsed" id="bs-navbar-collapse">
             <ul class="nav navbar-nav">
                 <li class="navbar-item">
                     <a class="nav-link" ui-sref="simListView" ui-sref-active="active" title="SIM list"><span class="glyphicon glyphicon-icons2"></span><span class="d-md-none d-lg-inline">Sim List</span></a>
                </li>
                <li class="navbar-item">
                            <a class="nav-link" ui-sref="reportsView" title="Reports"><span class="glyphicon glyphicon-chart-bars"></span><span class="d-md-none d-lg-inline">Reports</span></a>
                </li>

                    <li class="navbar-item" >
                        <a class="nav-link" routerLink="/hierarchy-mgmt" title="Show Managed Accounts" ><span class="glyphicon glyphicon-group-work"></span><span class="d-md-none d-lg-inline">Managed Accounts</span></a>
                    </li>

            </ul>
            <ul class="nav navbar-nav ml-auto">
                <li class="navbar-item" id="about_top_menu_button">
                    <a class="nav-link" href="javascript:void(0)" target="_self" (click)="open();" title="About Estate Management"><span
                            class="glyphicon glyphicon-ark-info-circle"></span><span class="d-md-none d-lg-inline">About</span></a>
                </li>

                <li class="navbar-item" >
                    <a class="nav-link"   title="Frequently Asked Questions and much more"><span
                            class="glyphicon glyphicon-question-circle"></span><span class="d-md-none d-lg-inline">Help</span></a>
                </li>

                <li>
                    <div class="d-sm-none" id="loggedinas">Welcome,<br/>User</div>
                </li>
                <li ngbDropdown class="dropdown" >
                    <a  id="userDropdown" href="javascript:void(0)" class="nav-link dropdown-toggle"  ngbDropdownToggle>
                        <span class="glyphicon "></span>
                        <span class="caret"></span>
                    </a>
                    <div ngbDropdownMenu class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
                        <div class="identity-cell"  id="notify_identity" >Identity: {{user}}</div>
                        <a class="dropdown-item" routerLink="/assume-id" title="Assume another user&#39;s identity">Assume Identity</a>
                        <a class="dropdown-item" routerLink="/my-profile" title="My user account details">My Profile</a>
                        <a class="dropdown-item" href="javascript:void(0)" (click)="logout();" title="Log out from Estate Management">Logout</a>
                    </div>
                </li>
            </ul>
        </div><!-- navbar collapse -->
</nav>

＆＃13;

所以我不确定我需要做什么。我发出了我认为像这样的模态组件的函数。

＆＃13;

import {Component,Output, EventEmitter, Input} from '@angular/core';

import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-modal-content',
  template: `
    <div (processYes)="processYes();" class="modal-header">
      <h4 class="modal-title">Hi there!</h4>
      <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>Hello, {{name}}!</p>
      <ng-template #tipContent>{{tip}}</ng-template>
      <a href="javascript:void(0)"><span [ngbTooltip]="tipContent" placement="right"  class="glyphicon glyphicon-ark-info-circle">Info</span></a>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="activeModal.close()">No</button>
      <button type="button" class="btn btn-primary" (click)="yes()">Yes</button>
    </div>
  `
})
export class NgbdModalContent {
  @Input() name;
  @Input() tip;
  @Output() processYes: EventEmitter<any> = new EventEmitter();
  
   yes(){
        console.log('Notify clicked...');
        this.processYes.emit();
        this.activeModal.close('Yes click');
    }
 

  constructor(public activeModal: NgbActiveModal) {
    
    
  }
}

＆＃13;

我的家庭组件 - 此时只是导航 - 应该从“是”＆＃39;按钮并用它做一些事情，主要是在自己内部运行一个新功能。这是代码：

＆＃13;

import { Component } from '@angular/core';
import { NgbdModalContent } from './modal.component';
import { NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';


@Component({
  selector: 'my-app',
  templateUrl:'src/home.content.html' 
})


export class HomeComponent {
  
  processYes(){
    console.log('run a new function of this component here');
  }
  
 constructor(private modalService: NgbModal) {}

  open() {
    const modalRef = this.modalService.open(NgbdModalContent);
    modalRef.componentInstance.name = 'World';
    modalRef.componentInstance.tip = 'Well this is a tooltip';
  
    }

  
}

＆＃13;

什么是最短路？为什么在打开它或放入数据的例子中，如果主组件实际上可以引用模态组件，那么还需要发射和输出模块？

这里也是plunker版本。 https://plnkr.co/edit/ZcD8NnHe0RqlwTDOA5Pz?p=preview

Answer 1

从开放功能中调用emitResponse

<input type="file">

试试这样：

我刚刚提到您的plunker代码，如下所示：

model.compoent.ts

open() {
  const modalRef = this.modalService.open(NgbdModalContent);
  modalRef.componentInstance.name = 'World Welcome';
  modalRef.componentInstance.emitData.subscribe(($e) => {
    this.recive($e);
  })
}

recive(event) {
  console.log('event', event);
}

和home.component.ts

import {Component, Input, Output, EventEmitter} from '@angular/core';

import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-modal-content',
  template: `
    <div class="modal-header">
      <h4 class="modal-title">Hi there!</h4>
      <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>Hello, {{name}}!</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="add()">Emit</button>
      <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
    </div>
  `
})
export class NgbdModalContent {
  @Input() name;
  @Output() emitData = new EventEmitter();
  constructor(public activeModal: NgbActiveModal) {}

  add() {
    this.emitData.next('Hello world');
  }
}

Answer 2

如果在打开或放入数据的示例中，如果主组件实际上可以引用模态组件，为什么还需要发射和输出模块？

@Input和@Output都是单向绑定。

什么是最短路？

通过在分配给@Output的{{1}}中设置ModalComponent，您已经在正确的轨道上了。您通过EventEmitter模板传递已发布的事件也在正确的轨道上，但您需要确保变量和函数名称与您的代码匹配，如下所示：

HomeComponent

作业的左侧是您的(processYes)="processYes()"变量，作业的右侧是@Output的功能。

Answer 3

如果要在用于创建模态的组件中运行某些方法，则可以像下面的代码一样进行操作。

modalRef.content.yourMethod();

如何将函数从modal传递给父组件并带有差异

3 个答案: