Угловая 2 Нажмите Событие: Измените изображение, затем измените маршрут

Question

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

home.component.html

<button class="hexagon" 
     (click)="gotoFinishing()"> 
    <img [src]="imgsrc"> 
</button> 

home.component.ts

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

@Component({ 
    templateUrl: 'home.component.html' 
}) 
export class HomeComponent { 

    constructor(private router: Router) { } 

    imgsrc="test.png"; 

    gotoFinishing(){ 
     this.imgsrc="test2.png"; 
     let link = ['/finishing']; 
     this.router.navigate(link); 
    } 
} 

Это не меняет СРК изображения, но это не прокладывайте пользователя на нужную страницу , Есть ли способ сделать это?

Спасибо!

Answer 1

Это «не меняется», потому что, как только вы переходите к другому пути на маршрутизаторе, старый вид уничтожается, и, таким образом, все состояние теряется.

Вам необходимо отделить состояние своего приложения, чтобы сохранить изменения в определенных представлениях. Для этого вам нужно создать поставщика для отслеживания состояния приложения, ввести его в представления/компоненты, которые вам нужно использовать для включения состояния, а в ссылке шаблона - соответствующая переменная состояния внутри поставщика.

Пример:

app.provider.ts

@Injectable() 
export class AppProvider { 
    public state = { 
     Home: { 
      imgsrc: 'test.png 
     } 
    }; 
} 

home.component.ts

import { Component, OnInit } from '@angular/core'; 
import { ActivatedRoute, Router } from '@angular/router'; 
import { AppProvider } from './app.provider.ts'; 

@Component({ 
    templateUrl: 'home.component.html' 
}) 
export class HomeComponent { 
    constructor(
      private router: Router, 
      public appProvider: AppProvider 
    ) { } 

    gotoFinishing(){ 
     this.appProvider.state.Home.imgsrc="test2.png"; 

     setTimeout(() => { 
      this.router.navigate(['/finishing']); 
     }, 1000); 
    } 
} 

home.component.html

<button class="hexagon" (click)="gotoFinishing()"> 
    <img [src]="appProvider.state.HomeComponent.imgsrc"> 
</button> 

Обязательно импортируйте и добавьте класс AppProvider в объявления вашего @NgModule, чтобы инъекция зависимости могла работать.

Надеюсь, это поможет.

---

ОБНОВЛЕНО ОТВЕТ: Добавлена ​​задержка на изменение маршрутизации таким образом, изменение изображения можно увидеть в первую очередь.