Angular 2 从路由出口通过点击到 app.component答案

【问题标题】：Angular 2 pass click to app.component from route-outletAngular 2 从路由出口通过点击到 app.component
【发布时间】：2017-07-22 11:30:19
【问题描述】：

我是 Angular 2 的新手并正在创建一个应用程序

app.routing.ts

const appRoutes: Routes = [
    {path:'', component:HomeComponent},
    { path: 'login', component: LoginComponent },
        { path: 'register', component: RegisterComponent },

    // otherwise redirect to home
    { path: '**', redirectTo: '' }
];

app.component.html

<app-navbar (sideMenuToggleClicked)="handleSideMenuToggle()"></app-navbar>
<div class="container-fluid">
    <div class="row">
        <div class="col col-sm-2 test-border" *ngIf="sideBarToggle">
            <h1>
                {{sideBarToggle }}
            </h1>
        </div>
        <div class="col col-10 test-border" [ngClass]="sideBarToggle?'col-10':'col-12'">
            <app-alert *ngIf="showAlert"></app-alert>
            <router-outlet (showAlert)="handleShowAlert($event)"></router-outlet>
        </div>
    </div>
</div>

register.component.ts

@Output() showAlert = new EventEmitter();
onSubmit(){
 this.registerService.getValues(this.registrationForm.value).then((result:any)=>{
        console.log(result)
       }).catch((error:any)=>{
         this.showAlert.emit({type:'error', message:error});
       });

      }

如您所见，我成功捕获了作为组件加载的 app-navbar 中的点击。

现在我正在尝试创建一个常见的警报通知，当我尝试使用时

<router-outlet (showAlert)="handleShowAlert($event)"></router-outlet>

我无法捕获 EventEmitter Click。

问题是如何将emit从register.component.html转移到app.component.html

【问题讨论】：

stackoverflow.com/questions/37662456/…
github.com/angular/angular/issues/11618
我得到了它与以上两个链接一起工作。答案来自 stackoverflow 和我们需要在 app.module.ts 中而不是在组件中定义的提供者

标签： angular

【解决方案1】：

它不会像您尝试的那样工作，它会尝试在找不到的 RouterOutlet 指令上查找 showAlert。

你需要检查Parent and children communicate via a service的方式。

希望这会有所帮助！

【讨论】：