,可以通过以下步骤实现:
npm install primeng --save
npm install primeicons --save
p-dropdown
组件来创建一个下拉列表:<p-dropdown [options]="options" [(ngModel)]="selectedValue" (onChange)="onValueChange()"></p-dropdown>
其中,options
是一个数组,包含了下拉列表的选项;selectedValue
是父组件中用于存储选择值的变量;onChange
是一个回调函数,用于在选择值发生变化时触发。
options
和selectedValue
变量,并实现onValueChange()
方法:import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
options: any[] = [
{ label: 'Option 1', value: 'option1' },
{ label: 'Option 2', value: 'option2' },
{ label: 'Option 3', value: 'option3' }
];
selectedValue: string;
onValueChange() {
// 在这里可以处理选择值变化后的逻辑
console.log(this.selectedValue);
}
}
<app-child [selectedValue]="selectedValue"></app-child>
其中,selectedValue
是父组件中的选择值变量。
@Input
装饰器来接收父组件传递的选择值:import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent {
@Input() selectedValue: string;
}
通过以上步骤,就可以使用primeNg和Angular 10实现将自动完成选择值传递给父组件的功能。在父组件中,通过ngModel
双向绑定实现选择值的获取和更新;在子组件中,通过@Input
装饰器接收父组件传递的选择值。
领取专属 10元无门槛券
手把手带您无忧上云