angular - 具有不同 routerLinks 的 Angular 通知组件未根据输入重定向

Question

我需要一些指导。我使用一个小组件来显示通知。在这个组件中，我有一个 routerLink、按钮文本和两个按钮的显示按钮 @Input。在另一个组件中，我为这两个按钮分配了值，并希望根据我的路由器值有不同的路由来重定向用户。

我遇到了一个问题，即secondaryRouterLink 并不总是触发，或者它导航到routerLink 而不是secondaryRouterLink。有时它工作得很好。

下面是我的通知组件：

  export class NotificationComponent implements OnInit {
  @Input() notificationHeader = null;
  @Input() notificationMessage = null;
  @Input() buttonText = null;
  @Input() routerLink = null;
  @Input() showButton = true;

  @Input() secondaryButtonText = null;
  @Input() showSecondaryButton = false;
  @Input() secondaryRouterLink = null;

  @Input() showNotification: boolean = false;

  showNotificationMessage = new BehaviorSubject<boolean>(false);

  constructor(private router: Router) { }

  ngOnInit(): void {
    this.routerLink = this.router.url;
  }

  emmitEvent() {
    this.close();
    this.callParentmethod.emit();
    this.router.navigate(['/search']);
  }

  close() {
    // Default stay on current page when closing error pop-up
    this.routerLink = this.router.url;

    this.showNotificationMessage.next(false);
  }
}

这是我的通知视图：

<div class="overlay" *ngIf="showNotification">
  <div class="box">
    <span class="fs-30 notification-header">{{ notificationHeader }}</span>
    <hr />
    <p class="notification-message">{{ notificationMessage }}</p>
    <div class="">
      <button
      *ngIf="showButton"
        type="button"
        class="af-button mt-2 mb-2 float-right mr-3"
        [routerLink]="[routerLink]"
        (click)="close()"
      >
        {{ buttonText }}
      </button>
      <button
        *ngIf="showSecondaryButton"
        type="button"
        class="af-button mt-2 mb-2 float-right mr-3"
        [routerLink]="[secondaryRouterLink]"
        (click)="close()"
      >
        {{ secondaryButtonText }}
      </button>
    </div>
  </div>
</div>

这是一个典型的用例，我将为通知组件分配值：

    this.showSecondaryButton = true;
    this.secondaryRouterLink = '/claims-tracking';
    this.secondaryButtonText = 'Track Claim';

    this.routerLink = '/search';
    this.buttonText = 'Close';

    this.showNotification = true;

我将不胜感激任何建议来完成这项工作！

标签： angulartypescript