没有登录的用户交互Angular？

在Angular中，可以使用路由守卫来实现没有登录的用户交互。

首先，创建一个名为AuthGuard的路由守卫服务。该服务将检查用户是否已登录，如果未登录，则导航到登录页面。

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private router: Router) {}

  canActivate() {
    // 检查用户是否已登录，这里假设有一个名为isLoggedIn的布尔值变量来表示登录状态
    const isLoggedIn = false; // 根据实际情况修改

    if (!isLoggedIn) {
      // 如果用户未登录，则导航到登录页面
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}

然后，在路由模块中使用AuthGuard保护需要登录权限的路由。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { LoginComponent } from './login.component';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  { path: '', component: HomeComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent },
  // 其他路由...
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

在上面的示例中，AuthGuard被应用于HomeComponent路由，该路由需要登录才能访问。如果用户未登录，则导航到登录页面。

最后，可以在HomeComponent中添加适当的用户交互。

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

@Component({
  selector: 'app-home',
  template: `
    <div *ngIf="isLoggedIn">
      // 用户已登录，显示内容
    </div>
    <div *ngIf="!isLoggedIn">
      // 用户未登录，显示提示信息
    </div>
  `
})
export class HomeComponent {
  isLoggedIn: boolean;

  constructor() {
    // 根据实际情况初始化isLoggedIn变量
    this.isLoggedIn = false;
  }
}

在HomeComponent中，根据isLoggedIn变量的值，展示不同的内容给已登录和未登录的用户。

希望上述解决方案能够帮助到你！