![](/img/trans.png)
[英]How to pass an array with id's from one component to another (angular)
[英]Pass array from one component to the other in Angular
在我的 Angular 应用程序中,我试图将数组playlist
从一个组件 (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() {
}
}
组件2.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() {
}
}
您可以通过在父模板中的 2 个组件之间绑定数据来传递数据。
在您的情况下,它将是:
内容组件.html
<app-header [playlist]="playlist">
</app-header>
如果我们要分解[playlist]="playlist"
:
左侧: [playlist]
引用您在子组件中的@Input()
。
右手边: ="playlist"
里面的播放列表访问public playlist = [];
你有你的父组件(ContentComponent)。
您正在尝试做的事情称为“组件交互”,您可以在此处从 Angular 的官方文档中阅读更多内容:组件交互。
您可以使用 @Input 传递数组,但子组件将获得playlist的引用。 如果你想传递播放列表的副本,那么这样做
在内容组件中
playlistToPass = JSON.stringify(this.playlist);
然后在 HeaderComponent 中转换回数组
playlist = JSON.parse(this.playlistPassed);
我发现最简单、最有效的方法是通过服务。 然后将其传递给组件的constrctor
。
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class PlaylistService {
public playlist = [];
constructor() {
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.