数据未从 Angular 中的组件传递

Question

I am trying to pass data between components using the @Input method. For some reason I don't have any errors in console but nothing appears in the component I am trying to pass data from content to header , which is the Header component. I have a home-view component which is constructed of these 3 components:

HOME-VIEW

• HEADER
• CONTENT
• FOOTER

The data needs to get passed from the content component to the header component. So far I am using the @Input method, but it's not working.

Header.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { faHeadphones} from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  faHeadphones = faHeadphones;

  @Input()playlist= [];

  constructor() { }

  ngOnInit() {
  }
}

header.html

<nav class="navbar navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">
      <fa-icon [icon]="faHeadphones"></fa-icon>
      Navbar
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
      aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Search</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">{{playlist.length}}</a>
          </li>
      </ul>
    </div>
  </div>
</nav>

content-component.ts

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../../../services/api.service';
import { FormGroup, FormControl } from '@angular/forms';
import { FormBuilder } from '@angular/forms';
import { faSearch } from '@fortawesome/free-solid-svg-icons';
import { faRedo } from '@fortawesome/free-solid-svg-icons';
import { faHeadphones } from '@fortawesome/free-solid-svg-icons';
import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
import { faPlus } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.scss']
})
export class ContentComponent {

  public data = [];
  public playlist = [];
  public apiData: any;
  public results = [];
  public loading = false;
  public noData: any;
  p: number = 1;
  faSearch = faSearch;
  faRedo = faRedo;
  faHeadphones = faHeadphones;
  faExternalLinkAlt = faExternalLinkAlt;
  faPlus = faPlus;

  searchQuery: string = "";
  clickMessage = '';

  constructor(private service: ApiService) { }

  getAll() {
    this.service.getAll(this.searchQuery).subscribe((results) => {
      this.loading = true;
      console.log('Data is received - Result - ', results);
      this.data = results.results;
      this.loading = false;

      if (this.data.length <= 0) {
        this.noData = true;
      } else if (this.data.length >= 1) {
        this.noData = false;
      } else {
        this.noData = false;
      }
    })
  }

  closeAlert() {
    this.noData = false;
  }

  addSongToPlaylist(itunes) {
    this.playlist.push(itunes);
    console.log('Playlist - ', this.playlist);
}

  refresh(): void {
    window.location.reload();
  }

  Search() {
    this.service.getAll(this.searchQuery).subscribe((results) => {
      this.loading = true;
      console.log('Data is received - Result - ', results);
      this.data = results.results;
      this.loading = false;
    })
  }
  ngOnInit() {

  }
}

Home-view component.html

<app-header [playlist]="playlist"></app-header>
    <app-content ></app-content>
<app-footer></app-footer>

home-view.ts

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../../services/api.service';

@Component({
  selector: 'app-home-view',
  templateUrl: './home-view.component.html',
  styleUrls: ['./home-view.component.scss']
})
export class HomeViewComponent implements OnInit {

  public playlist = [];

  constructor(private service: ApiService) { }

  ngOnInit() {
  }

}

Answer 1

If I understood well, those three components are sharing the same array (called playlist). The thing is that the playlist is being modified inside ContentComponent, and

1. You're not notifying the parent (HomeViewComponent) about that change,
2. The Content and Header components are siblings, so, there's no way they can communicate with simple binding.

You have two options:

1. Move the playlist logic to the parent component and trigger those parent actions through @Output decorators inside the ContentComponent or
2. Use two way binding with the playlist inside the ContentComponent

If you choose the second option you might declare an @Output property like @Output() playlistChange = new EventEmitter() and call this.playlistChange.emit(this.playlist) every time you modify the array inside the ContentComponent, also in your template you might change <app-content></app-content> with <app-content [(playlist)]="playlist"></app-content>

And don't forget to declare the input property like @Input() playlist: any[]

Note : In order to use the two way binding, the Output property must named as I specified, I mean, if your property is named x the output property must be named x Change

Answer 2

In app-content component, add event emitter

...
@Output() playlistChange: EventEmitter = new EventEmitter<any>();
...

And emit playlist inside addSongToPlaylist

...
addSongToPlaylist(itunes) {
    this.playlist.push(itunes);
    this.playlistChange.emit(this.playlist);
    console.log('Playlist - ', this.playlist);
}
...

Now, change app-content tag to below code in your home-view.html

...
<app-content (playlistChange)="assignVal($event)"></app-content>
...

Add assignVal method in your home-view.component.

    assignVal(value){
    this.playlist = value;
}

Answer 3

The easiest way I found was create a service and pass into the constructor of the component:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class PlaylistService {

  public playlist = [];

  constructor() { 

  }
}