Question

我正在尝试更改按钮图像src并在点击时将用户路由到另一个页面。这是我尝试过的。

home.component.html

[DllImport("lcms2.dll")]

home.component.ts

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

它不会更改图像src，但会将用户路由到正确的页面。有没有办法做到这一点？

谢谢！

Answer 1

它不会改变＆＃34;因为只要你导航到路由器上的另一条路径，旧视图就会被破坏，因此所有状态都会丢失。

您需要解耦应用程序的状态，以便保留对特定视图的更改。要做到这一点，您需要创建一个提供程序来跟踪应用程序状态，将其注入您需要使用状态的视图/组件中，并在模板中引用相应的状态变量提供者。

示例：

<强> 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的声明中，以便依赖注入可以正常工作。

希望它有所帮助。

更新的答案： 为路由更改添加了延迟，因此可以首先看到图像更改。

Angular 2单击事件：更改图像，然后更改路径

1 个答案: