Как передать значение привязки img в другой компонент - Angular 2+ - PullRequest
Новая
       17

Как передать значение привязки img в другой компонент - Angular 2+

0 голосов
/ 02 октября 2018

Я начинаю с 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';
}

Мой вывод выглядит так:

enter image description here

Теперь я перехожу на страницу 2. Маршрутизация работает отлично.

Код компонента моей страницы2: 

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

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

}

Моя страница 2 выглядит следующим образом:

enter image description here

Я не получаю динамически page1 img во второй компонент,

Как получить это во втором компоненте?

1 Ответ

0 голосов
/ 02 октября 2018

У вас есть много решений для "вашей проблемы".Как видно из примера, область действия компонента по умолчанию «изолирована», она не имеет общих переменных.

Так что здесь все будет зависеть от того, что вы хотите сделать:

  1. Сначала вы можете передать «img url» в качестве параметра url, проверив документацию маршрутизаторассылка, но, на мой взгляд, это выглядит довольно странно:

  2. Вы можете создать Injectable () и внедрить его в компоненты page-two и page-one.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" />

Вы также можете создать @Directive, который будет работать с вашим тегом img, и изменить атрибут src с помощью URL.

Вы можете создать подкомпонент, используемый на странице.одна и вторая страница, чтобы показать img

...