Question

我有一个header.component.ts，一旦用户登录就应填充用户名。我希望能够从mainMenuComponent调用header.component类的函数/方法。

这是在angular2的上下文中。因此，当我路由到我的mainmenu.component时，它应该调用header.component来设置用户名。

这是我的布局：

app.component：

@Component({
    selector: 'myapp',
    template:`<header userName="{{userName}}"></header>
                        <router-outlet></router-outlet>`,
    directives: [ROUTER_DIRECTIVES, HeaderComponent]   
})

@RouteConfig([
  {path:'/', name:'Login', component: LoginComponent, useAsDefault: true},
  {path:'/mainmenu', name:'MainMenu', component: MainMenuComponent},])

header.component：

@Component({
    selector: 'header',
    templateUrl: 'header.html'     
})

export class HeaderComponent {
       @Input() userName;

       updateHeaderUserName(userName:string) {
                this.userName = userName;
           }
}

login.component：

onSubmit() {
   this._router.navigate( ['MainMenu', {userName: 'John Doe'}] );
}

mainMenuComponent：

export class MainMenuComponent implements OnInit { 

    constructor(
        private _routeParams:RouteParams){}

        ngOnInit() {
          // CAN I CALL THIS FUNCTION OFF THE HEADER.COMPONENT HERE???
          updateHeaderUserName(this._routeParams.get('userName'));     

        }

}

从代码中可以看出，我已经尝试过使用路由参数的解决方案，但是我可以在路由时传递userName，以便于路由组件通信，但是不清楚HeaderComponent是否在内存中我是如何调用的它有公共功能吗？

Answer 1

正如@micronyks所说，共享服务似乎是解决方案。不容错过的重要事情是通过组件共享相同的服务实例。

您可以在引导应用程序时在提供程序中定义此服务：

bootstrap(MainComponent, [ SharedService ]);

然后你可以将它注入到两个组件，LoginComponent和MainMenuComponent中。这样，您可以共享数据，而无需在无法引用的组件上调用updateHeaderUserName ...

有关依赖注入和分层注入器的更多信息，您可以查看以下答案：

What's the best way to inject one service into another in angular 2 (Beta)?

从另一个类

1 个答案: