角度从另一个组件发送数据

我想发送从另一个组件中选择的数据(文件.ts中的变量)

.html:

<div class="liste">
                <select class="form-control" name="Container" (change)="selectChangeHandler($event)">
                    <option disabled selected value> -- select an Container -- </option>
                    <option *ngFor="let v of values;let i = index" [value]="i">
                        {{v.Name}}
                    </option>
                </select>
            </div>

            <div class="tableau" *ngIf="show" >
                <table align="center">
                    <tr align="center"><b>{{selectedValue.Name}}</b></tr>
                    <tr align="center"><td>Matricule: {{selectedValue.Matricule}}</td></tr>
                    <tr align="center"><td>Material: {{selectedValue.Material}}</td></tr>

        <div class="modal-body">
            <app-heat-local> </app-heat-local>
        </div>

如何通过使用此组件发送数据来获取此组件的价值?

另一个组件.html(本地热):

<h6 class="container-name">{{selectedValue.Name}}</h6>
评论
  • Honey
    Honey 回复

    One way you can send send data using @input from one component to another component. Another way you can use SharedService with the help of BehaviorSubject you can achieve. this link will help you.. https://stackblitz.com/edit/angular-shared-service?file=app%2Fcommon%2Fshared.service.ts

  • 给爷站住
    给爷站住 回复

    从这个问题来看,似乎有可能以这种方式解决它。

    You can set value of an option to variable inside of selectChangeHandler()

    selectChangeHandler(event) {
      this.currentValue = event.target.value;
    }
    

    To get it inside of app-heat-local

    <div class="modal-body">
      <app-heat-local [value]="currentValue"> </app-heat-local>
    </div>
    

    To be able to set [value] attribute you need to define @Input() property inside of HeatLocalComponent

    You could use @Input() to achieve this.

    import {Component, Input} from '@angular/core';
    
    @Component({
      selector: 'app-heat-local',
      templateUrl: './heat-local.component.html',
      styleUrls: ['./heat-local.component.scss']
    })
    export class HeatLocalComponent {
      @Input() value: number;
    }
    

    To display the value in heat-local.component.html just bind the value

    <h6 class="container-name">{{value}}</h6>
    

    You can read more about it here