Блог

Главная - Вопросы по программированию - Ссылка на компонент, отображаемый в «app.component.html»

Ссылка на компонент, отображаемый в «app.component.html»

#angular #angular-components

Вопрос:

У меня есть компонент с именем NavigationBar , который помещен в app.component.html 

 <body>
<app-navigation-bar></app-navigation-bar>
<router-outlet></router-outlet>
</body>
</html>

У него есть собственность, имя IsUserLogged . Если верно — то отобразите меню для входа в систему, если нет, отобразите меню с опцией входа в систему. Возможно ли это, чтобы получить доступ/ссылку на этот компонент от другого?
Я направил конечную /login точку на LoginFormComponent . Мне нужно изменить IsUserLogged NavigationBar , на true, после успешного входа пользователя в систему.

Ответ №1:

Существуют различные варианты получения одного и того же результата. Я собираюсь поделиться с вами одним из них.

Во-первых, вы должны создать глобальную службу

AuthService.service.ts

 @Injectable({
  providedIn: 'root'
})
export class AuthServiceService {

  private _sesionState: BehaviorSubject<boolean>;

  constructor() {
    this._sesionState = new BehaviorSubject(false)
   }

  public changeLoggedIn(isLoggedIn: boolean): void{
    this._sesionState.next(isLoggedIn);
  }

  public onLoggedInChanged(){
    return this._sesionState.asObservable();
  }

}

Затем, например, на вашей странице входа в систему.

 @Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  
  constructor(private authService: AuthServiceService) {}


  public login(): void {
    // Your logic here
    // If gets a success login
    this.authService.changeLoggedIn(true);

  }

Наконец, в вашем компоненте навигационной панели

 @Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
  
  constructor(private authService: AuthServiceService) {}


  public getLoggedInUser(): void {
    this.authService.onLoggedInChanged().subscribe((loggedIn: boolean) => {
      // If(loggedIn) => 
    })

  }

В этом случае мы используем Субъектов для обмена информацией вокруг приложения. Это может быть все, что вы хотите, любой тип данных.
Итак, если вы хотите узнать больше о предметах, потенциально
Я бы рекомендовал вам Темы, объекты поведения, объекты ответов

Метки: ,