如何顯示來自其他組件的登錄表單？

我有共同的標題組件和頁腳組件。頭部組件在模型彈出窗口中有登錄表單腳本。當用戶點擊這些組件中的添加評論按鈕時，我想顯示登錄模型彈出如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>

來源

2017-10-04 vel

這是一種處理事件的黑/白同級組件

我認爲你需要這樣的：

您可以使用EventEmitter，

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

備註：

您可以SE

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

路由器的出口是在你的app-component，所以你需要編寫handleClickEvent功能存在。然後，您只需將值傳遞給標題組件即可。在更改事件標題將顯示登錄表單。

來源

2017-10-04 13:47:04

你能否用我的代碼創建plunkr？ – vel

請問您是否可以使用您現有的代碼爲我創建一個調度程序，我將根據此改變此問題。 @vel –

或者我們可以爲登錄創建單獨的組件嗎？ – vel

如何顯示來自其他組件的登錄表單？

回答

相關問題