基于grepl [if]的ifelse语句(An ifelse statement based on grepl [duplicate])

 它“不会改变”，因为只要您导航到路由器上的另一条路径，旧视图就会被破坏，因此所有状态都会丢失。 
 
 您需要解耦应用程序的状态，以保留对特定视图的更改。 要做到这一点，您需要创建一个提供程序来跟踪应用程序状态，将其注入您需要使用状态的视图/组件，并在模板中引用提供程序中相应的状态变量。 
 
 例： 
 
 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的声明中，以便依赖注入可以工作。 
 
 希望能帮助到你。 
 
 
 更新的答案：为路由更改添加了延迟，因此可以首先看到图像更改。 

It's "not changing" because as soon as you navigate to another path on the router, the old view is destroyed and thus all state is lost.
 
You need to decouple the state of your application in order to preserve changes to particular views. To do that, you'll need to create a provider for keeping track of the app state, inject it into the views/components you'll need to use state on, and in the template reference the corresponding state variable within the provider.
 
Example:
 
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>
 
Be sure to import and add the AppProvider class into the declarations of your @NgModule so the dependency injection can work.
 
Hope it helps.
 
 
UPDATED ANSWER: Added a delay to the routing change so the image change can be seen first.