Question

我在开发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;
        }

     }

login服务

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

@Injectable()
export class LoginService {

    constructor(private app:AppComponent){}

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

}

在这个例子中，我将loginService注入到一个被路由到的组件中，然后在该组件中注入appComponent以显示用户已登录，以便我可以显示应该只对用户可见的菜单图标谁登录。

这只是错了。有一个更好的方法吗？谢谢你的帮助！

在angular4应用程序中，如何更改从插座中具有路由器插座的组件中的数据？

0 个答案: