如何显示来自其他组件的登录表单？

Question

我有共同的标题组件和页脚组件。头部组件在模型弹出窗口中有登录表单脚本。当用户点击这些组件中的添加评论按钮时，我想显示登录模型弹出如HomepageComponent,CountryDetailComponent,ExploreListComponent & DetailedPageComponent。我的代码在这里。如何只显示一个登录模式弹出所有？

APP-routing.module.ts

const routes: Routes = [ 
     { path: '', redirectTo: '/home', pathMatch: 'full' }, 
     { path: 'home', component: HomepageComponent,}, 
     { path: ':city', component: CountryDetailComponent }, 
     { path: ':city/:subscategory', component: ExploreListComponent }, 
     { path: ':city/:subscategory/:singleitem', component: DetailedPageComponent }, 
    ]; 

app.component.ts

import { Component } from '@angular/core'; 

    @Component({ 
     moduleId: module.id, 
     selector: 'my-app', 
     template: ` 
     <app-header></app-header> 
     <router-outlet></router-outlet> 
     <app-footer></app-footer> 
     `, 
    }) 
    export class AppComponent { } 

header.component.ts

import { Component,Renderer } from '@angular/core'; 
    import { Title } from '@angular/platform-browser'; 

    @Component({ 
     moduleId: module.id, 
     selector: 'app-header', 
     template: `header.component.html`, 
    }) 

    export class HeaderComponent { 
    constructor(title: Title) { } 
    } 

header.component.html

<div> 
    /* header menu here */ 
</div> 


<div> 
    /*login form here */ 
</div> 

Answer 1

这是一种处理事件的黑/白同级组件

我认为你需要这样的：

您可以使用EventEmitter，

http://plnkr.co/edit/XJwjQ6L7s95mmwHqbu9H?p=preview 

备注：

您可以SE

<router-outlet (eventFromComponent)='handleClickEvent($event)'></router-outlet> 

路由器的出口是在你的app-component，所以你需要编写handleClickEvent功能存在。然后，您只需将值传递给标题组件即可。在更改事件标题将显示登录表单。