Question

我是角色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.component.html中的emit传输到app.component.html

Answer 1

它不会像您尝试的那样起作用，它会尝试在getEncoded()指令上查找它找不到的showAlert。

您需要查看Parent and children communicate via a service的方式。

希望这会有所帮助!!

Angular 2 pass从route-outlet点击app.component

1 个答案: