时间戳

首页 > 解决方案 > 如何将变量（HTTP 相关）从 1 个组件发送到 2 个组件

angular - 如何将变量（HTTP 相关）从 1 个组件发送到 2 个组件

问题描述

public getCinemaById(id)返回kin，我希望这个常量导出到第二个组件

第一个组件

import { Component, OnInit } from '@angular/core';
import { ProgrammeService } from '../CinemaProgramme';
import { CinemaProgramme , Cinema , ProgrammeItems , Movie} from './interfaceCinemaProgramme';

@Component({
  selector: 'app-cinema-programme',
  templateUrl: './cinema-programme.component.html',
  styleUrls: ['./cinema-programme.component.css']
})

export class CinemaProgrammeComponent implements OnInit {

  kina: Cinema[];
  selectedKinoId: '';

 getCinemas(): void {
   this.programmeService.getCinemas().
   subscribe(kina => this.kina = kina);
 }

  public getCinemaById(id) {
   for (const kin of this.kina) {
     // tslint:disable-next-line: triple-equals
     if (kin.id == id) {
       return kin;
     }
   }
 }

 constructor(private programmeService: ProgrammeService) { }

 ngOnInit() {
   this.getCinemas();
 }
}

第二部分

import { Component, OnInit } from '@angular/core';
import { ProgrammeService } from '../CinemaProgramme';


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

  constructor(private programmeService: ProgrammeService) { }

  ngOnInit() {
  }


}

html 1 组件

<span *ngFor="let cos of kina" style="color:white;">{{ cos.id }}</span>

  <form class="" >
  <select name="cos" [(ngModel)]="selectedKinoId" searchable="Search here.." placeholder="Search..">
    <option value="" disabled selected >Wybierz kino</option>
    <option *ngFor="let kino of kina" [value]="kino.id"> {{ kino.name }} </option>
  </select>
  </form>

  <div *ngIf="selectedKinoId"  style="color:white; margin-left:12px;">

    <div *ngFor="let kin of getCinemaById(selectedKinoId).cinemaProgramme.programmeItems">
      <div class="img-repertuar">
      </div>

      <div class="one-repertuar">

        <span [routerLink]="[kin.movie.id]" style="display:block; margin:3px; margin-top:10px;"><strong style="color:#e1cc89;"><legend>{{ kin.movie.title }}</legend></strong></span>
        <span style="display:block; margin:3px; margin-top:20px; ">{{ kin.movie.description }}</span>

        <span style="display:block; margin:3px; margin-top:110px; margin-left:-120px;">Czas:{{ kin.movie.length }}</span>
        <span style="display:block; margin:3px; margin-top:10px;">Reżyseria: {{ kin.movie.director }}</span>
      </div>
    </div>
  </div>

</div>

HTML 2 组件

<p style="color:white;">movie works!</p>

  <span>
    {{ kin.movie.title }}  // I want here details selected movie
  </span>

<router-outlet></router-outlet>

因此，当在组件 1 中单击电影的标题时，它会将我发送到包含我选择的同一部电影的详细信息的组件。此功能向我显示哪个 ID 具有给定曲目所在的电影院，其中包含我要发送到第二个组件以在 html 中引用 ngIF 的给定电影。怎么做 ？

标签： angulartypescript

解决方案

确保您RouterModule在 module.ts 文件中导入。像这样设置路线：

const appRoutes: Routes = [
  { path: '/', component: CinemaProgrammeComponent },
  { path: 'movie/:id',      component: MovieComponent }

然后它很简单：

import {Router, ActivatedRoute, Params} from '@angular/router';
import {OnInit, Component} from '@angular/core';

@Component({...})
export class MyComponent implements OnInit {

  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    // Note: Below 'queryParams' can be replaced with 'params' depending on your requirements
    this.activatedRoute.queryParams.subscribe(params => {
        const userId = params['id'];
        console.log(userId);
      });
  }

}

在你的第二个组件中从你的第一个组件中提取 id。

推荐阅读