如何将img绑定值传递到另一个组件-Angular 2+；

我正在开始学习Angular2+

我的第一个组件称为Page1：

import { Component } from '@angular/core';

@Component({
  selector: 'page-one',
  template: `
  <h1>Page 1</h1>
  <img src={{img}} />
  <br />
  <br />
  <a [routerLink]="['/page2']">
     Go to page 2
  </a>
  `
})
export class Page1Component {
    img = 'https://dummyimage.com/300/09f/fff.png';
}

从'@angular/core'导入{Component}；
@组成部分({
选择器：“第一页”，
模板：`
第1页





现在我导航到第2页，路由工作得很好

My page2组件代码：

import { Component } from '@angular/core';

@Component({
  selector: 'page-two',
  template: `
  <h1>Page Two!!</h1>
  <img src={{img}} />
  `
})
export class Page2Component {

}

从'@angular/core'导入{Component}；
@组成部分({
选择器：“第二页”，
模板：`
第二页！！
`
})
导出类Page2组件{
}

我的第2页看起来像：


我不会动态地将page1 img放入第二个组件

如何将其纳入我的第二个组件？
对于“您的问题”，您有很多解决方案。正如您在示例中所看到的，默认情况下，组件范围是“隔离的”，它们不共享变量

因此，这取决于您想做什么：

通过检查路由器链接的文档，您可以首先将“imgURL”作为url参数传递，但在我看来，这样做似乎是一个相当大的改变

您可以创建一个Injectable（）并将其注入第二页和第一页组件中。Injectable（）是单例实例（当它们由模块提供时），它们将帮助您共享变量和方法

@可注射（）
导出类MyImgUrls{
公共img1Url=''；
}

在第一页

 constructor(private myImgUrl: MyImgUrls){}

 getImgUrl(){
   return this.myImgUrl.img1Url;
 }

html:

<img [attr.src]="getImgUrl()" />

然后在你的组件中

<img [attr.src]=" ''| myImgUrl" />



您还可以创建一个@Directive，用于img标记，并使用url更改src属性

您可以创建第1页和第2页使用的子组件来显示img

您需要通过服务将img源发送到另一个组件—在您的情况下，它不是子组件。如果它是子组件，则可以使用
Input（）
decorator和
[src]
property binding无需使用服务，只需将图像作为属性传递，然后在子组件中添加一个
@Input
您可以发布一些代码作为答案吗？我有一个复杂的背景。
<img [attr.src]=" ''| myImgUrl" />