Podemos usar la directiva @Input para pasar los datos del componente Padre a Hijo en Angular
Uso del enlace de entrada: @Input: podemos usar esta directiva dentro del componente secundario para acceder a los datos enviados por el componente principal. Aquí app.component es el componente principal y cdetail.component es el componente secundario.
Componente principal
app.component.ts Hay dos arrays. Uno para list_prog – lista de idiomas, prog_details – detalles de idiomas.
app.component.ts
import { Component } from '@angular/core'; import { AbstractControl, FormBuilder, FormGroup } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { list_prog = ['JAVA', 'C++', 'C', 'PYTHON', 'JAVASCRIPT']; prog_details = [`Java is a widely used platform independent language. Java was developed by James Gosling.`, `C++ is multi-paradigm and procedural oriented language. Developed by Bjarne Stroustrup.`, `C is a procedural language and developed by Dennis Ritchie`, `Python is a interpreted high level language developed by Guido van Rossum`, `Javascript is a language that conforms the ECMAScript and developed by ECMAScript`]; options: number; curr_info: string; prog_title: string; constructor() {} onClick(lang) { switch (lang) { case 'JAVA': this.options = 0; this.curr_info = this.prog_details[this.options]; this.prog_title = this.list_prog[this.options]; break; case 'C++': this.options = 1; this.curr_info = this.prog_details[this.options]; this.prog_title = this.list_prog[this.options]; break; case 'C': this.options = 2; this.curr_info = this.prog_details[this.options]; this.prog_title = this.list_prog[this.options]; break; case 'PYTHON': this.options = 3; this.curr_info = this.prog_details[this.options]; this.prog_title = this.list_prog[this.options]; break; case 'JAVASCRIPT': this.options = 4; this.curr_info = this.prog_details[this.options]; this.prog_title = this.list_prog[this.options]; break; default: break; } } }
app.component.html Aquí hemos agregado nuestro componente secundario dentro del componente principal y pasamos dos datos, uno es prog_title y otro es curr_info. Pero asegúrese de haber declarado los detalles de la variable y el título dentro del componente secundario.
HTML
<div class="container"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-6"> <h4 class="makeCenter"> List of Programming Languages </h4> <ul class="uList"> <li *ngFor="let lang of list_prog" [ngClass]= "{'active': list_prog[options]===lang}" (click)="onClick(lang)" class="lLang"> {{lang}} </li> </ul> </div> </div> </div> <br><br><br> <app-cdetail [title]="prog_title" [details]="curr_info"> </app-cdetail>
Componente hijo
cdetail.component.ts Aquí hemos usado la directiva @Input() dentro del componente secundario. Ahora, en el componente secundario, se pueden usar los datos pasados por el componente principal.
Javascript
import { Component, Input, OnInit } from '@angular/core'; @Component({ selector: 'app-cdetail', templateUrl: './cdetail.component.html', styleUrls: ['./cdetail.component.css'] }) export class CdetailComponent implements OnInit { @Input() details: string; @Input() title: string; constructor() { } ngOnInit(): void { } }
cdetail.component.html
HTML
<div class="container"> <div class="row"> <div class="col-md-4"></div> <div class="col-md-4"> <h3 class="makeCenter">{{title}}</h3> <p style="text-align: justify; text-justify: inter-word;"> {{details}} </p> </div> </div> </div>
Producción
Publicación traducida automáticamente
Artículo escrito por amitsingh48 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA