Реализовать условную маршрутизацию в Angular

Я пытаюсь реализовать следующую функциональность. Когда нажимается кнопка для проверки условия, условие должно быть переменной (или суммой в моем случае), отличной от неопределенной (если отличается, то успех). Затем либо перейти на страницу успеха, если условие выполнено, либо отобразить страницу отказа, если условие не выполнено (+, если на странице ничего не изменилось, просто перейдите на страницу успеха).

.html

<div class = "d-flex justify-content-center">

<button type = "button" (click) = "updatePost()" routerLink = "/success-page">Save</button>

Метод updatePost() в файле .ts просто вызывает функцию из службы и обновляет пользователя, если некоторые свойства изменены (у меня есть несколько текстовых полей ввода в файле .html).

updatePost() {
    this.sharedservice.updateUser(this.user).subscribe(response => {
}, error => {
    console.info(error);
    })
}

Я пробовал много способов, но функциональность неверна. Проблема может заключаться в том порядке, в котором я пытался вызвать функцию и реализовать логику.

Обе страницы зарегистрированы как routes.

const routes: Routes = [
    {path: 'success-page', component: DisplaySuccessComponent},
    {path: 'fail-page', component: DisplayFailPageComponent},
];
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
25
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

вы не должны использовать routerLink в этом случае, а перемещаться внутри функции upadtePost(), т.е.:

updatePost() {
    this.sharedservice.updateUser(this.user).subscribe(
    response => {
        this.router.navigate('/success-page');
    }, 
    error => {
        console.info(error);
        this.router.navigate('/fail-page');
    });
}

Ответ принят как подходящий

Для этого вы должны использовать Router из конструктора. Для этого вам нужно предоставить конструктор (частный маршрутизатор: маршрутизатор) {}, затем вам нужно проверить, что переменная не должна быть неопределенной, нулевой или не ожидаемой, тогда вам нужно направить как this.router.navigate(['fail-page']); и если не undefined, не null и как и ожидалось, вы можете перемещаться с помощью this.router.navigate(['success-page']);. Итак, ваш окончательный код, как показано ниже: -

// В HTML:-

<button type = "button" (click) = "updatePost()">Save</button>

// В ТС:-

updatePost() { 
    this.sharedservice.updateUser(this.user).subscribe(response => {
       this.router.navigate(['success-page']);
}, error => {
       this.router.navigate(['fail-page']);
    console.info(error);
    })
}

Другие вопросы по теме