Изучение Angular2

Вместе шаблон и класс компонента образуют единое целое. Через свойство селектора в аннотации @Component мы контролируем, как этот компонент может быть создан в шаблонах. В приведенном выше шаблоне мы аналогичным образом используем этот playlist-entryэлемент для создания экземпляров вложенных компонентов для каждого из entryнас в PlaylistComponent. Эти записи поступают из метода получения entries()этого компонента. Используя [entry]="entry"синтаксис, мы передаем текущую запись в итерации entryсвойству экземпляра вложенного компонента (который является простым элементом класса в классе PlaylistEntryComponent).

Обратите внимание, что мы используем два пользовательских элемента в шаблоне: ng-forи playlist-entry. Глядя на класс PlaylistComponent, вы видите, что они явно перечислены directivesв аннотации @View. Больше не нужно гадать, откуда берутся «волшебные» элементы! Это прямо там. И не только как строки, но и должным образом импортированные и ссылающиеся из файла, в котором они определены. В этом случае ng-for родом из самого Angular2, а PlaylistEntryComponent определен ранее в том же файле (опущено выше). Возможно, вас интересует слегка прикольный синтаксис со звездочками и скобками. К счастью, есть метод безумия. Прочтите этот пост для более глубокого изучения синтаксиса шаблона Angular2. И да, это на 100% правильный синтаксис HTML-атрибута , если вам интересно.

Одно справедливое предупреждение при работе с компонентами: порядок объявления компонентов в одном исходном файле имеет значение. Сначала я определил PlaylistComponent, а PlaylistEntryComponent позже в файле. Это казалось таким логичным, но оно сломалось во время выполнения. Есть прямая ссылка на класс, который еще не существует в directivesсвойстве PlaylistComponent. Это делает для некоторых хороших сообщений об ошибках и трассировки стека в консоли, я могу вам сказать. (для неудачливого гуглера, который страдает от этой проблемы: «ИСКЛЮЧЕНИЕ: неожиданное значение директивы« неопределенное »в представлении компонента« PlaylistComponent »было ошибкой с Angular2.alpha45 и более ранними версиями)

Мораль истории: определите (или импортируйте) свои компоненты, прежде чем ссылаться на них в других компонентах. Или прибегнуть к уродливым обходным путям .

Взаимодействие компонентов

Таким образом, у нас есть дерево компонентов, компоненты инкапсулируют данные и могут визуализировать себя изначально. Следующий вопрос: как что-то сделать? Как компоненты взаимодействуют с пользователем и друг с другом?

С AngularJS 1.x вы по умолчанию используете двухстороннее связывание данных. В Angular2 по умолчанию данные передаются однонаправленно, от корневого компонента до дочерних. Мы уже видели пример передачи данных дочерним компонентам через их атрибуты, которые заканчиваются на членах класса компонентов. Здесь одностороннее движение. У вас есть два основных способа взаимодействия между произвольными неиерархическими компонентами: события и общие компоненты.

В этом примере используются общие компоненты. Также возможно определить пользовательские события и запустить поведение по всему дереву компонентов. Однако, не все пользовательские события распространяются правильно в альфа-версиях, с которыми я работал. Вы не найдете пример использования пользовательских событий в YouTube Live !, но вы можете найти больше информации в этом посте .

Примером общих компонентов в действии является воспроизведение видео на YouTube в прямом эфире. Видео можно запустить как из записей плейлиста, так и из результатов поиска. Эта общая функциональность может быть достигнута простым созданием класса VideoPlayer с соответствующими методами и состоянием:

export class VideoPlayer {
  public isPlaying = false;
  public currentVideoUrl: string

  public playConcert(id: string) {
    this.isPlaying = true;
    this.currentVideoUrl = this.concertIdToEmbedUrl(id);
  }

  public stop() {
    this.isPlaying = false;
    this.currentVideoUrl = undefined;
  }

  private concertIdToEmbedUrl(id: string): string {
    return yt_embed + id + '?showinfo=0&autoplay=1';
  }
}

@Component({
  selector: 'search-result',
  properties: ["concert"],
  providers: [LocalStoragePlayList]
})
@View({
  templateUrl: "ytlive/search/searchresult.html",
  directives: []
})
class SearchResultComponent {
  concert: ytbackend.ConcertSummary

  constructor(private playlistService: LocalStoragePlayList,
     private videoPlayer: ytbackend.VideoPlayer) {}

  addToPlaylist(concert: ytbackend.ConcertSummary) {
    this.playlistService.addConcert(concert);
  }

  playConcert(id: string) {
    this.videoPlayer.playConcert(id);
  }
}

<!-- lots of stuff omitted -->
<button title="Play now" class="play btn btn-success">
    <span (click)="playConcert(concert.id)" class="glyphicon glyphicon-play-circle"></span>
</button>

<!-- lots of stuff omitted -->
<div *ng-if="playing" id="concerts" class="row">
  <iframe width="100%" height="100%" [src]="embedUrl" frameborder="0" allowfullscreen></iframe>
</div>

@Injectable()
export class ConcertService {

  private concerts: ConcertSummary[];

  constructor(private http: Http) { }

  public findConcerts(artist: string, duration = Duration.FULLCONCERT): any {
    var ytDuration: string;

    // .. snipped for brevity ..

    var searchString = yt_search + ytDuration + '&q=' + encodeURIComponent('live ' + artist);

    return this.http.get(searchString).map((res: any) => {
      var ytResults: {items: YTSearchResult[] } = res.json();
      var transformedResults = ytResults.items.map(this.toConcertSummary)
      this.concerts = transformedResults;
      return transformedResults;
    });
  }
}

export class SearchComponent {

  private concerts: ytbackend.ConcertSummary[] = [];

  constructor(private concertService: ytbackend.ConcertService,
      private videoPlayer: ytbackend.VideoPlayer) { }

  searchConcerts(): void {
    this.videoPlayer.stop();
    this.concertService
      .findConcerts(this.searchTerm)
      .subscribe((results: ytbackend.ConcertSummary[]) => this.concerts = results);
  }
}