Динамическое обновление шаблона на компоненте

Question

Я хочу сделать еще один шаблон при неудаче аутентификации:

@Component({ 
    selector: 'app-root', 
    templateUrl: './a.html', 
    }) 
export class AppComponent implements OnInit { 
    ngOnInit() { 
     if (!this.isAuthenticated()) { 
      this.templateUrl = './b.html'; 
     } 
    } 
    isAuthenticated(): boolean { 
     // return by user authenticate status 
    } 
} 

Answer 1

Что вам нужно на самом деле охранник и не редирект или другой компонент.

Создать учетную authentication.guard.ts, содержащие этот код:

@Injectable() 
export class AuthenticationGuard implements CanActivate { 

constructor(
    private router: Router, 
    private authenticationService: AuthenticationService, 
) {} 

public canActivate(): boolean { 
    if (this.authenticationService.isLoggued()) { 
     return true; 
    } 

    this.router.navigate(["/login"]); 
    return false; 
} 

}

В вашем определении маршрута, указать, что доступ к определенному компоненту должны быть защищены этим охранником:

{ path: "yourRoute", component: DummyComponent, canActivate: [AuthenticationGuard] }, 

Теперь каждый запрос будет «проверен» с этим предохранителем. И тебе хорошо идти.