Блог

Мне нужны некоторые рекомендации, пожалуйста. Я использую небольшой компонент для отображения уведомлений. В этом компоненте у меня есть ссылка на маршрутизаторы, текст кнопки и показать кнопку @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;
 

Я был бы признателен за любые предложения по выполнению этой работы!