de-vraag
  • Pertanyaan
  • Tag
  • Pengguna
Notifikasi
Imbalan
Registrasi
Setelah Anda mendaftar, Anda akan diberitahu tentang balasan dan komentar untuk pertanyaan Anda.
Gabung
Jika Anda sudah memiliki akun, masuk untuk memeriksa pemberitahuan baru.
Akan ada hadiah untuk pertanyaan, jawaban, dan komentar tambahan.
Lebih
Sumber
Sunting
 Sajeetharan
Sajeetharan
Question

Melewatkan data dari anak ke komponen induk Angular2

Saya memiliki komponen bernama search_detail yang memiliki komponen lain di dalamnya bernama calendar,

Komponen_Detail_pencarian.html

 <li class="date">
   <div class="btn-group dropdown" [class.open]="DatedropdownOpened">
   <button type="button" (click)="DatedropdownOpened = !DatedropdownOpened"   class="btn btn-default dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" [attr.aria-expanded]="dropdownOpened ? 'true': 'false'">
      Date <span class="caret"></span>
  </button>
  <ul class="dropdown-menu default-dropdown">
     <calendar  ></calendar>
     <button > Cancel </button>
     <button (click)="setDate(category)"> Ok </button>
   </ul>                            
 </div>
</li>

Komponen_Rincian_Pencarian.ts

import 'rxjs/add/observable/fromEvent';
@Component({
    selector: 'searchDetail',
    templateUrl: './search_detail.component.html',
    moduleId: module.id

})

Kalender.component.ts

import { Component, Input} from '@angular/core'; 
@Component({
    moduleId:module.id,
    selector: 'calendar',
    templateUrl: './calendar.component.html'
})

    export class CalendarComponent{
      public fromDate:Date = new Date();    
      private toDate:Date = new Date();
      private events:Array<any>;
      private tomorrow:Date;
      private afterTomorrow:Date;
      private formats:Array<string> = ['DD-MM-YYYY', 'YYYY/MM/DD', 'DD.MM.YYYY', 'shortDate'];
      private format = this.formats[0];
      private dateOptions:any = {
        formatYear: 'YY',
        startingDay: 1
      };
      private opened:boolean = false;

      public getDate():number {
        return this.fromDate.getDate()  || new Date().getTime();
      }
    }

Saya ingin mengakses tanggal mulai dan tanggal akhir saat klik tombol ok di halaman detail pencarian. bagaimana caranya?

39 2017-02-08T07:31:52+00:00 2
Seid Mehmedovic
Seid Mehmedovic
Pertanyaan edit 12 September 2017 в 4:44
Pemrograman
javascript
components
angular
typescript
Solution / Answer
Seid Mehmedovic
Seid Mehmedovic
8 Februari 2017 в 9:57
2017-02-08T09:57:18+00:00
Lebih
Sumber
Sunting
#32727334

Daftarkan EventEmitter di komponen anak Anda sebagai @Output:

@Output() onDatePicked: EventEmitter<any> = new EventEmitter<any>();

Memancarkan nilai saat klik:

public pickDate(date: any): void {
    this.onDatePicked.emit(date);
}

Dengarkan peristiwa di templat komponen induk Anda:

<div>
    <calendar (onDatePicked)="doSomething($event)"></calendar>
</div>

dan di komponen induk:

public doSomething(date: any):void {
    console.log('Picked date: ', date);
}

Hal ini juga dijelaskan dengan baik di dokumen resmi: Interaksi komponen.

Seid Mehmedovic
Seid Mehmedovic
Jawaban edit 13 Februari 2017 в 12:25
103
0
Marco Castano
Marco Castano
8 Februari 2017 в 9:07
2017-02-08T09:07:47+00:00
Lebih
Sumber
Sunting
#32727333

Halo, Anda dapat menggunakan input dan output. Input memungkinkan Anda untuk melewatkan variabel dari induk ke anak. Output sama tetapi dari anak ke orang tua.

Cara termudah adalah dengan melewatkan "startdate" dan "endDate" sebagai input

<calendar [startDateInCalendar]="startDateInSearch" [endDateInCalendar]="endDateInSearch" ></calendar>

Dengan cara ini Anda memiliki tanggal mulai dan tanggal akhir langsung di halaman pencarian. Beritahu saya jika ini berhasil, atau pikirkan cara lain. Terima kasih

-4
0
Related communities 3
JavaScript Indonesia
JavaScript Indonesia
14 533 pengguna
Grup JavaScript yang membahas JavaScript, framework JS, dan Node JS secara universal. Cek Pinned Message untuk keterangan lebih lanjut. Komunitas ReactJS: https://t.me/react_idn
Buka telegram
Angular Indonesia
Angular Indonesia
3 519 pengguna
Framework web development aplikasi web dan mobile https://angular.io/ Facebook Group https://www.facebook.com/groups/462764390497214/ Github Repo Angular ID https://github.com/angular-indonesia Medium Angular Indonesia https://medium.com/angularid
Buka telegram
Typescript Indonesia
Typescript Indonesia
1 956 pengguna
Share yg berhubungan dengan Typescript aja, biar tetap relevant
Buka telegram
Tambahkan pertanyaan
Kategori
Semua
Teknologi
Budaya / Rekreasi
Kehidupan / Seni
Ilmu Pengetahuan
Profesional
Bisnis
Pengguna
Semua
Baru
Populer
1
Asilbek Qadamboyev
Terdaftar 1 hari yang lalu
2
Akshit Mehta
Terdaftar 4 hari yang lalu
3
me you
Terdaftar 1 minggu yang lalu
4
Никита иванов
Terdaftar 1 minggu yang lalu
5
Alex1976G_06
Terdaftar 1 minggu yang lalu
ID
JA
KO
RU
© de-vraag 2022
Sumber
stackoverflow.com
di bawah lisensi cc by-sa 3.0 dengan atribusi