Question

如何通过单击其他项目中的按钮来更改body background-image（在index.html中）？

我有这个简单的index.html代码：

<body>
  <app-root></app-root>
</body>

我尝试在app.component.html和app.component.ts中使用[ngStyle]="{ 'background-image': getBackgroundImg() }"：

export class AppComponent {

public getBackgroundImg(){
    return "url(\"http://fureka.loc/artem-girls/bathtub_(474).jpg\") ";
}
}

但它在其他组件中的工作，而不是在index.html

Answer 1

您无法在index.html中使用[ngStyle]。也许可以在app.component.ts：

中试试这个

constructor(private renderer: Renderer2) {}

clickMe() {
    this.renderer.setStyle(document.body, 'background-image', this.getBackgroundImg());
}

在您的app.component.html：

中

<button (click)="clickMe()">Click me</button>

Answer 2

[ngStyle]="{ 'background-image': getBackgroundImg() }""

请检查你的双引号..

[ngStyle] =＆＃34; {＆＃39; background-image＆＃39 ;: getBackgroundImg（）}＆＃34;