如何根据路由名称更改按钮名称而不单击它？

发布于 2025-02-04 14:34:20 字数 588 浏览 2 评论 0原文

我想更改标题上的按钮的名称。如果我登录，它将更改按钮的名称为“注册”，如果我去注册，则将按钮名称更改为“登录”。我想在不单击的情况下更改按钮名称。我的问题是，当我使用this.router.navigate（['login']）在另一个组件中，按钮名称未更改为“ Inbisup”。我该怎么做？这是我的代码：

header.component.ts

changedText() {
    if(this.router.url.includes('/signup')) {
      this.text = 'Login';
    } else {
      this.text = 'Signup';
    }
  }

header.component.html

<button *ngIf="!IsLoggedIn()" mat-raised-button color="warn" class="add-button me-2" (change)="changedText()" (click)="toggleButton()">{{text}}</button>

原文

I want to change the name of the button on my header. If I go to login it will change the name of the button to "Signup" and if I go to signup it will change the button name to "Login". I want to change the button name without clicking it. My problem is when I use this.router.navigate(['login']) in another component the button name is not changed to "signup". How can I do this? Here's my code:

header.component.ts

changedText() {
    if(this.router.url.includes('/signup')) {
      this.text = 'Login';
    } else {
      this.text = 'Signup';
    }
  }

header.component.html

<button *ngIf="!IsLoggedIn()" mat-raised-button color="warn" class="add-button me-2" (change)="changedText()" (click)="toggleButton()">{{text}}</button>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

哑 2025-02-11 14:34:20

export class AppComponent implements OnInit {

  public text: string

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.url.subscribe((url) => {
      this.text = url[0].path == 'signup' ?  'Signup' : 'Login'
    });
  }
  
}

export class AppComponent implements OnInit {

  public text: string

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.url.subscribe((url) => {
      this.text = url[0].path == 'signup' ?  'Signup' : 'Login'
    });
  }
  
}

回复收藏 0 原文

思慕 2025-02-11 14:34:20

ts：

  readonly label$ = this.router.events
    .pipe(
      filter(event => event instanceof NavigationEnd),
      map(event => event.url.includes('/signup') ? 'Login' : 'Signup')
    );

  constructor(private readonly router: Router) {
  }

html：

  <button *ngIf="!IsLoggedIn()" 
          mat-raised-button 
          color="warn" 
          class="add-button me-2" 
          (click)="toggleButton()">{{label$ | async}}</button>

TS:

  readonly label$ = this.router.events
    .pipe(
      filter(event => event instanceof NavigationEnd),
      map(event => event.url.includes('/signup') ? 'Login' : 'Signup')
    );

  constructor(private readonly router: Router) {
  }

HTML:

  <button *ngIf="!IsLoggedIn()" 
          mat-raised-button 
          color="warn" 
          class="add-button me-2" 
          (click)="toggleButton()">{{label$ | async}}</button>

回复收藏 0 原文

~没有更多了~