两个组件之间的相互作用

Question

我需要一些帮助。我有一个主页和一个收藏夹页面(另一个组件(在主页中，用户输入一个电影列表，在该列表中显示2个按钮(Delete和fav(我的问题最严重我希望当我按下收藏夹按钮时，它会将其添加到收藏夹列表中，当我转到收藏夹页面时，它将显示收藏夹列表。

你能帮我吗？我是网络编程的新手。

我的家组件.ts:

import { Component } from '@angular/core';
@Component({ 
selector: 'app-home', 
templateUrl: './home.component.html', 
styleUrls: ['./home.component.css'] 
}) 
export class HomeComponent { 
/* Un tableau vide dans lequel vont être ajoutés les entrées.*/
public films = [];
public favorites = [];

/* Ajout des élèments en entrée dans la liste avec vérification que le texte n'est pas vide.*/
public newFilm; 
public addToList() { 
if (this.newFilm == '') { 
} 
else { 
this.films.push(this.newFilm); 
this.newFilm = ''; 
} 
} 
/*Fonction permettant l'ajout d'un element à la liste des favoris*/
public addtofav(index){
this.favorites.push(this.newFilm);
}

/*Fonction permettant la suppression d'une élement de la liste des films et de favoris*/
public deleteTask(index) { 
this.films.splice(index, 1); 
this.favorites.splice(index, 1);
}
}

My home.component.html：

<div class="row bg-dark justify-content-center 
align-items-center" style="height:100px"> 
<div class="col-5"></div> 
<div class="col-6 text-white h2"> 
Home Page
</div> 
</div>

<!--Bloc s'occupant des inputs -->
<div class="row mt-1" style="height:80px;"> 
<div class="col-3 d-none col-md-3 d-md-block"></div> 
<div class="col-12 col-md-6 bg-dark d-flex  
justify-content-center align-items-center  
text-light h3"> 
<input [(ngModel)]="newFilm" type="text" 
value="" class="col-7 form-control"
style="width:300px;"> 
<div class="col-1"></div> 
<button (click)="addToList()"  
class="btn btn-light text-danger"> 
Ajoutez un film
</button> 
</div> 
<div class="col-3 d-none col-md-3 d-md-block"></div> 
</div> 
<!--Bloc s'occupant de la liste des films-->
<div *ngFor="let x of films; let index = index;" 
class="row mt-1" style="height:100px;">
<div class="col-3 d-none col-md-3 d-md-block"></div> 
<div class="col-12 col-md-6 bg-dark d-flex 
justify-content-center align-items-center 
text-light h3"> 
<div class="col-8 text-light h3">{{x}}</div> 
<input (click)="deleteTask(index)" type="button"
value="Delete" class="col-2 btn btn-danger"> 
<input (click)="addtofav(index)" type = "button"
value="Fav" class = "col-2 btn btn-success">
</div>

<div class="col-3 d-none col-md-3 d-md-block"></div> 
</div> 
</div> 
`

Answer 1

我正在扩展Mike S.的答案。

如果零部件处于父子关系，则可以在零部件之间共享数据。您还可以使用服务在它们之间共享数据。

在您的情况下，最好提供一个带有可观察阵列的服务，您的收藏夹组件可以订阅该阵列，以便获得收藏夹列表。

服务：

@Injectable()
export class SharedService {
constructor() { }
//you need to have an existing array in order to assing it to an observable one
//since you cant directly push to ovbservable arrays
private favouritesSource: string[] = [];
favourites: Subject<string[]> = new Subject();
addToFavourites(film: string){
this.favouritesSource.push(film);
this.favourites.next(this.favouritesSource);
}
}

最受欢迎的组件：

export class FavouritesComponent implements OnInit {
constructor(private sharedService: SharedService) { }
favourites: string[];
ngOnInit() {
//assigning the array from the service to the one that displays the favourites
this.sharedService.favourites.subscribe(favourites => {
this.favourites = favourites;
})
}
}

电影部分：

export class MoviesComponent {
constructor(private sharedService: SharedService) { }
addToFavourites(film: string){
this.sharedService.addToFavourites(film);
}
}

我希望这能有所帮助：(

编辑

只有当两个组件同时显示时，这种方法才会起作用，这意味着使用这种方法进行路由将不起作用。

这是因为当您使用angulars路由器进行导航并使用router-outlet显示组件时，将重新加载正在显示的组件。这意味着ngOnInit()方法被再次调用，随后也被调用可观测的.subscribe()方法。

问题是，.subscribe()内部的语句只在可观测值发生变化时才会触发，并且由于没有加载能够引发可观测值变化的组件，因此.subscribe()内部的语句不会触发。

编辑2

如果你必须使用angulars路由器在两个组件之间导航，下面是一个例子。

服务：

@Injectable()
export class SharedService {
constructor() { }
private favourites: string[] = [];
addToFavourites(film: string){
this.favourites.push(film);
}
getFavourites(){
return this.favourites;
}
}

电影部分：

xport class MoviesComponent {
constructor(private sharedService: SharedService) { }
addToFavourites(film: string){
this.sharedService.addToFavourites(film);
}
}

最受欢迎的组件：

constructor(private sharedService: SharedService) { }
favourites: string[];
ngOnInit() {
this.favourites = this.sharedService.getFavourites();
}
}

导航可以这样发生：

constructor (private router: Router){}
this.router.navigate(['urlToNavigateTo']);

或者这个：

<anyHtmlElement routerLink="/urlToNavigateTo">Navigate to url</anyHtmlElement>

Stackblitz示例