如何在TypeScript文件中声明主属性并跨组件TS文件调用？——解决app.component.ts中isSigned属性跨组件访问失败问题

Hey there! It sounds like you're working on an Angular project and need to share the isSigned property defined in app.component.ts with your signIn.component.ts and nav-bar.component.ts—but you're running into access issues. Let's break down the best solutions for component state sharing, depending on your project's needs:

Solution 1: Use a Shared Auth Service (Most Versatile) #

This is the go-to approach for sharing state across any components, regardless of their hierarchy. Services in Angular are singletons (when provided at the root), so they're perfect for holding and propagating shared state.

Step 1: Create the Auth Service #

First, generate a service (or create it manually):

ng generate service auth

Then update auth.service.ts to hold the isSigned state with a reactive subject:

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root' // Makes this a global singleton
})
export class AuthService {
  // BehaviorSubject stores the current state and emits it to new subscribers
  private isSignedSubject = new BehaviorSubject<boolean>(false);
  // Expose an observable so components can subscribe (but not modify directly)
  isSigned$: Observable<boolean> = this.isSignedSubject.asObservable();

  constructor() {}

  // Method to update the state (components call this to change isSigned)
  setIsSigned(status: boolean): void {
    this.isSignedSubject.next(status);
  }
}

Step 2: Update app.component.ts to Use the Service #

Instead of holding isSigned locally, let the service manage it. You can still subscribe to the state if you need it in the app component:

import { Component } from '@angular/core';
import { AuthService } from './auth.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isSigned: boolean = false;

  constructor(private authService: AuthService) {
    // Sync local property with service state
    this.authService.isSigned$.subscribe(status => {
      this.isSigned = status;
    });
  }

  // Example: Call this when user logs in
  handleSignIn(): void {
    this.authService.setIsSigned(true);
  }

  // Example: Call this when user logs out
  handleSignOut(): void {
    this.authService.setIsSigned(false);
  }
}

Step 3: Access State in signIn.component.ts #

Inject the service and subscribe to the isSigned$ observable to get the latest state:

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-sign-in',
  templateUrl: './sign-in.component.html',
  styleUrls: ['./sign-in.component.css']
})
export class SignInComponent implements OnInit {
  isSigned: boolean = false;

  constructor(private authService: AuthService) {}

  ngOnInit(): void {
    // Subscribe to state changes
    this.authService.isSigned$.subscribe(status => {
      this.isSigned = status;
    });
  }

  // Example: Update state when login succeeds
  onLoginSubmit(): void {
    // Add your login logic here
    this.authService.setIsSigned(true);
  }
}

Step 4: Access State in nav-bar.component.ts #

Do the same as above to get the isSigned state for your navbar:

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-nav-bar',
  templateUrl: './nav-bar.component.html',
  styleUrls: ['./nav-bar.component.css']
})
export class NavBarComponent implements OnInit {
  isSigned: boolean = false;

  constructor(private authService: AuthService) {}

  ngOnInit(): void {
    this.authService.isSigned$.subscribe(status => {
      this.isSigned = status;
    });
  }
}

This approach ensures all components stay in sync whenever isSigned changes, and works for any component relationship (parent-child, sibling, cross-module).

Solution 2: Use @Input()/@Output() (For Parent-Child Relationships) #

If nav-bar and sign-in are direct children of app-component, you can pass the property down and emit events to update it:

Step 1: Pass isSigned to Child Components in app.component.html #

<!-- Pass isSigned to navbar -->
<app-nav-bar [isSigned]="isSigned"></app-nav-bar>

<!-- Pass isSigned and listen for changes from sign-in -->
<app-sign-in [isSigned]="isSigned" (signInStatusChange)="updateIsSigned($event)"></app-sign-in>

Step 2: Receive isSigned in nav-bar.component.ts #

Use @Input() to accept the property from the parent:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-nav-bar',
  templateUrl: './nav-bar.component.html',
  styleUrls: ['./nav-bar.component.css']
})
export class NavBarComponent {
  @Input() isSigned!: boolean; // Mark as input from parent
}

Step 3: Emit State Changes from signIn.component.ts #

Use @Output() to send updates back to the parent:

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-sign-in',
  templateUrl: './sign-in.component.html',
  styleUrls: ['./sign-in.component.css']
})
export class SignInComponent {
  @Input() isSigned!: boolean;
  @Output() signInStatusChange = new EventEmitter<boolean>();

  onLogin(): void {
    // Add login logic, then emit the new state
    this.signInStatusChange.emit(true);
  }
}

Step 4: Update State in app.component.ts #

Handle the emitted event to update the parent's isSigned property:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isSigned: boolean = false;

  updateIsSigned(status: boolean): void {
    this.isSigned = status;
  }
}

Note: This only works for direct parent-child relationships. If your components are not in a parent-child chain, the service approach is better.

Solution 3: NgRx (For Complex State Management) #

If your app grows to have more shared state (like user profiles, permissions, etc.), consider using NgRx for centralized state management. It's more complex but scales well for large applications. For just isSigned, though, the service approach is more than enough.

Important Note #

Never try to directly access another component's properties—Angular components are designed to be encapsulated. Breaking this encapsulation leads to tight coupling and hard-to-maintain code.

内容的提问来源于stack exchange，提问作者Rami