Angular 6中如何根据URL为不同用户复用同一登录组件

这个需求很常见，我刚好做过类似的实现，给你分享两种靠谱的方法：

这种方法直接从路由实例里拿到当前的路径信息，判断是user还是admin来控制内容显示：

1. 在LoginComponent中注入ActivatedRoute服务
2. 在组件初始化时获取当前路由的路径，设置显示状态
3. 在模板中用*ngIf控制找回密码链接的展示

组件代码（LoginComponent.ts） #

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  // 控制找回密码链接的显示状态
  showForgotPassword = false;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    // 获取当前路由的配置路径
    const currentRoutePath = this.route.snapshot.routeConfig?.path;
    // 只有当路径是user时才显示链接
    this.showForgotPassword = currentRoutePath === 'user';

    // 如果需要支持动态路由跳转（比如从其他路由切换到当前组件），可以订阅路由变化
    // this.route.url.subscribe(urlSegments => {
    //   const currentPath = urlSegments[0]?.path;
    //   this.showForgotPassword = currentPath === 'user';
    // });
  }
}

模板代码（LoginComponent.html） #

<!-- 你的登录表单内容 -->
<div class="login-form">
  <input type="text" placeholder="用户名">
  <input type="password" placeholder="密码">
  <button>登录</button>

  <!-- 只有showForgotPassword为true时显示该链接 -->
  <div *ngIf="showForgotPassword" class="forgot-password">
    <a href="/forgot-password">找回密码</a>
  </div>
</div>

这种方法更优雅，把是否显示找回密码的配置放在路由定义里，组件只需要读取配置即可，后续维护更方便：

1. 修改路由配置，给每个路由添加data字段，标记是否显示找回密码
2. 在组件中读取路由的data数据，设置显示状态
3. 模板中同样用*ngIf控制展示

修改后的路由配置 #

const routes: Routes = [
  { 
    path: 'user', 
    component: LoginComponent,
    data: { showForgotPassword: true } // 标记需要显示找回密码
  }, 
  { 
    path: 'admin', 
    component: LoginComponent,
    data: { showForgotPassword: false } // 标记不显示
  }, 
];

组件代码（LoginComponent.ts） #

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  showForgotPassword = false;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    // 读取路由data中的配置，默认不显示
    this.showForgotPassword = this.route.snapshot.data['showForgotPassword'] ?? false;

    // 支持动态路由跳转的订阅写法
    // this.route.data.subscribe(data => {
    //   this.showForgotPassword = data['showForgotPassword'] ?? false;
    // });
  }
}

模板代码和方案一完全一致 #

不需要修改模板，直接复用即可。

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