javascript - Angular2如何更新另一个组件中的图像

Question

我有两个组件，一个是顶部栏，另一个是个人资料管理页面。

问题在于更新个人资料图像，它也应该从顶部栏标题中更改。它确实存在，但在页面重新加载时。我希望它是即时的。

为此，如果我在顶部栏组件中点击一个函数并更改显示图像的变量，我就可以做到这一点。但是我无法弄清楚我该怎么做我的意思是如果图像在我的配置文件组件中更新那么我如何调用顶栏组件的函数并更改变量的值。

我尝试的是:

top-bar.component.ts :

@Component({


selector: 'top-bar',
  templateUrl: './top-bar.component.html',
})
export class TopBarComponent {
     @Output() myEvent = new EventEmitter();
       test()
    {
    console.log("in test");
    }
   }

我的配置文件.component.html:

<top-bar #modal></top-bar>
    <top-bar (myEvent)="modal.test()"></top-bar>

我期望在我的个人资料页面加载时，我应该得到 console.log("in tets");。如果错了请纠正我，我怎样才能做到这一点。感谢

我已经在 my-profile 组件中导入了 top-bar 组件

Answer 1

我假设您的顶部栏组件中有一个图像元素。您将需要为该组件创建一个输入，您将使用该输入将图像绑定(bind)到。

所以你会在类里面的某个地方这样做。

export class TopBarComponent {
    @Input() imageSrc: string;
}

你将像这样在你的模板中使用它

<img [src]="imageSrc"></img>