Question

有没有办法在Angular 5的组件之间拥有一个共享变量。例如，登录后我想拥有用户ID，并将其传递给其他组件以使用该ID进行一些操作。我想避免使用sesseionStorage，localStorage或参数。我想要一个客户端不可见的变量。我听说过@Input @output，但是我不知道正确的方法

Answer 1

您可以为此使用Angular Service。

例如：

@Injectable({
    providedIn: 'root'
})
export class AuthService {
    userId: number;
}

然后在某些组件中：

@Component({...})
export class SomeComponent {
    constructor(private auth: AuthService) {
        // ...
    }

    // Do whatever you want with "userId" by using "this.auth.userId"
}

Answer 2

有几种方法可以实现，

@Input和@OutPut，当您没有很多嵌套组件丢失时：

您有ParentComponent，然后您有ChildComponent。所以我会用1个父母，1个孩子。

但是，如果结构看起来更像ParentComponent-> FirstLevelChildComponent-> SecondLevelChildComponent，那么如果要在SecondLevelChildComponent中访问的值来自{{ 1}}，您需要经历ParentComponent-> SecondLevelChildComponent-> FirstLevelChildComponent。这是太多的嵌套，最佳实践不要超过1级深度。

解决方案是什么？

您可以使用在组件中注入的服务。
使用StateManagement（Redux）。仅当您拥有复杂的应用程序时。

有关更多信息，请参见本文：

https://medium.com/@mirokoczka/3-ways-to-communicate-between-angular-components-a1e3f3304ecb

组件之间的共享变量

2 个答案: