如何将功能从模态传递到具有差异的父组件

Question

我已经查看了一些示例，因此标题添加了“与差异”。

在这些例子中，在到母部件的自定义标签模式的负载：即

但我没有自定义标签。莫代尔完美地载入我想要的身体。

这里是home.component.html

<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>

所以我不知道我需要做的。我发出我认为这样的模态组件的功能。

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) { 
 
    
 
    
 
    } 
 
}

而且我家成分 - 其只是导航在moment-应得到“是”按钮的功能，用它做的东西，主要是在自身运行新的功能。下面是代码：

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'; 
 
    
 
    } 
 

 
    
 
}

什么是最短的路？为什么在打开数据或输入数据的例子中，如果家庭组件实际上可以引用模式组件，为什么需要发送和输出模块？

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

Answer 1

呼叫emitResponse了开放功能

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); 
} 

尝试这样的：

我刚才提到你plunker代码做象下面这样：

model.compoent.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'); 
    } 
} 

和home.component.ts

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

Answer 2

为什么有发射和如果家庭组分实际上可以在其打开或投入数据的例子中参考模态分量反正需要输出模块？

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

什么是最短路？

你已经在正确的轨道在这里通过分配给一个EventEmitter的ModalComponent设置您的@Output。您也是在经过发射事件通过您HomeComponent模板在正确的轨道上，但你需要确保的变量和函数的名称相匹配你的代码，就像这样：

(processYes)="processYes()" 

的左侧该作业是您的@Output变量，作业的右侧是您的HomeComponent中的函数。