Javascript 按角度将阵列从一个组件传递到另一个组件
在我的Angular应用程序中,我试图将数组Javascript 按角度将阵列从一个组件传递到另一个组件,javascript,angular,Javascript,Angular,在我的Angular应用程序中,我试图将数组播放列表从一个组件(1)传递到另一个组件(2)。最好的方法是什么@输入 组件1.ts import { Component, OnInit } from '@angular/core'; import { ApiService } from '../../../services/api.service'; import { FormGroup, FormControl } from '@angular/forms'; import { FormBuil
播放列表
从一个组件(1)传递到另一个组件(2)。最好的方法是什么@输入
组件1.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() {
}
}
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() {
}
}
您可以使用@Input传递数组,但子组件将获得播放列表的引用。 如果要传递播放列表副本,请按此方法执行
在内容组件中
playlistToPass = JSON.stringify(this.playlist);
然后转换回HeaderComponent中的数组
playlist = JSON.parse(this.playlistPassed);
我发现最简单、最有效的方法是通过服务。然后将其传递到组件的
构造函数中
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class PlaylistService {
public playlist = [];
constructor() {
}
}
组件通信有很多方法,主要方法是输入(将数据传递给子级)、输出(将数据传递给父级)或共享服务(在任意组件之间传递数据)。您如何使用输入方法传递数组,正如我看到的,这主要是使用字符串数组中的其他对象播放列表是对象数组。使用JSON.stringify()将对象数组转换为JSON字符串没有问题。