如何將功能從模態傳遞到具有差異的父組件

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中的函數。