0

我在开发 angular2-4 应用程序时多次遇到这种情况。我仍然不知道解决这种情况的最佳方法。情况是这样的：

像 app.component.ts 这样的组件有一个标头。此标头需要对在路由器插座中生成的组件内发生的用户输入做出反应。根据我的经验，使用事件发射器将数据发送到路由器插座之外是行不通的。我一直在做的是将 AppComponent 标记为@Injectable()。然后我可以通过将 app.component 注入任何需要访问它的组件来访问方法和数据。这似乎不是正确的方法。这个问题有更好的解决方案吗？

这是我所说的 app.component.html 的一个例子

<nav>My pretty navbar<md-icon *ngIf="userIsLoggedIn" svgIcon="hamburgerMenu"></md-icon></nav>
<router-outlet></router-outlet>

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass'],
  providers: [ApplistenerService, LoginResourcesService]
})


    @Injectable()
    export class AppComponent{

        userIsLoggedIn=false;

        setUserIsLoggedInToTrue(){
            this.userIsLoggedIn=true;
        }

     }

登录服务

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

@Injectable()
export class LoginService {

    constructor(private app:AppComponent){}

    setLoginToTrue(){
        this.app.setUserIsLoggedInToTrue();
    }

}

在此示例中，我将 loginService 注入到正在路由到的组件中，然后在该注入 appComponent 中以显示用户已登录，以便我可以显示菜单图标，该图标仅对已登录的用户可见在。

这只是感觉不对。有一个更好的方法吗？谢谢你的帮助！

4

0 回答 0