Пользователь ngIf зарегистрирован в компоненте show

#html #angular #mdbootstrap

#HTML #угловой #mdbootstrap

Вопрос:

Я создаю приложение, которое должно быть доступно для пользователей без учетной записи, но как только кто-то создает учетную запись, он должен иметь возможность видеть дополнительные функции, и оно также должно быть отзывчивым.

Для быстрого реагирования я использую material design для начальной загрузки и angular material mdbootstrap. В приведенном ниже примере я бы хотел изменить размер mdb-col-size с 9 на 12 в зависимости от того, вошел пользователь в систему или нет, и, следовательно, не отображать опции save, ….

 <div>
  <div class="row ">
    <div class="col-lg-9 col-md-8 col-sm-6 ">
      <div class="row  ">
        <div class="col-md-12 mb-12">
          <div class="card testimonial-card  ">
            <div class="card-up lighten-1 ">
              <div class="card-body">
                <h4 class="card-title">{{ dare.title }}</h4>
                <hr />
                <p>{{ dare.description }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6"><!--this shouldn't be displayed when someone is not logged in-->
      <div class="row">
        <div class="col-12">
          <button mat-raised-button class="btn btn-block">
            Save
          </button>
        </div>
      </div>

      <br />

      <div class="row">
        <div class="col-12">
          <button mat-raised-button class="btn btn-block">
            Challenge someone else
          </button>
        </div>
      </div>

      <br />

      <div class="row">
        <div class="col-12">
          <button mat-raised-button class="btn btn-block">
            Create new ...
          </button>
        </div>
      </div>
    </div>
  </div>
  <br />
</div>

Я ожидаю увидеть параметры только тогда, когда кто-то войдет в систему, и соответственно изменится скорость реагирования.

Заранее спасибо!

1. если у вас есть свойство в вашем component.ts like isLoggedIn , которое проверяет, зарегистрирован ли пользователь уже или нет. Для достижения этой цели вы можете использовать привязку свойств [ngClass]="{'mdb-col-9': isLoggedIn,'mdb-col-12':! isLoggedIn}" и *ngIf="isLoggedIn" сохранение и другие параметры в соответствии с требованиями

Ответ №1:

Вам лучше использовать Guards в вашем проекте, пример в документации: https://angular.io/api/router/CanActivate

Для этого вы должны реализовать два компонента (один для аутентифицированного пользователя, другой для неаутентифицированного пользователя). Определите маршрутизацию, например:

 {
    path: '',
    component: AuthenticatedUserComponent,
    canActivate: [AuthenticatedUserGuard]
},
{
    path: '',
    component: UnauthenticatedUserComponent
}

А затем определите охрану:

 @Injectable()
class AuthenticatedUserGuard implements CanActivate {

   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree {
      return true; // here you should call a method from service, that 
                   // that holds whether user is authenticated or not 
    }
}