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

Question

我正在开始使用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';
}

我的输出如下：

现在我正在导航到page2，路由可以正常工作。

我的page2组件代码：

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

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

}

我的第2页如下：

我没有将page1 img动态添加到第二个组件中，

如何将其纳入我的第二部分？

Answer 1

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

所以这取决于您要执行的操作：

1. 您可以首先通过检查路由器链接的文档来将“ img url”作为url参数传递，但在我看来，这样做似乎很不错。

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

   @Injectable（） 导出类MyImgUrls {   public img1Url ='https://dummyimage.com/300/09f/fff.png'; }

在第一页中

 constructor(private myImgUrl: MyImgUrls){}

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

html：

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

3。对于您而言，由于只需要它来管理视图，因此可以创建一个@Pipe（）以便在组件之间共享到img url，这将完全满足您的需求。管道通常用于“ transformValue”，但您也可以通过它轻松管理和共享案例。

@Pipe({ name: 'myImgUrl', pure : true })

export class MyImgUrlPipe implements PipeTransform {

      transform() { // transform have some parameter but will don't need it in your situation
        return 'https://dummyimage.com/300/09f/fff.png'; 
      }
    }

，然后在您的组件中

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

1. 您还可以创建一个适用于img标签的@Directive并使用url更改src属性。

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