在Angular 6中,可以使用多个@Input()
装饰器来定义多个输入属性。下面是一个示例解决方法,其中包含了多个@Input()
级别的代码示例:
首先,创建一个父组件,该组件包含多个输入属性。在这个示例中,我们假设有一个User
类,它有name
和age
两个属性:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
Parent Component
`
})
export class ParentComponent {
user: User = {
name: 'John Doe',
age: 30
};
}
interface User {
name: string;
age: number;
}
然后,创建一个子组件,该组件接收父组件传递的输入属性。在这个示例中,子组件接收一个user
对象和一个isAdmin
布尔值:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: `
Child Component
Name: {{ user.name }}
Age: {{ user.age }}
Is Admin: {{ isAdmin }}
`
})
export class ChildComponent {
@Input() user: User;
@Input() isAdmin: boolean;
}
interface User {
name: string;
age: number;
}
最后,在模块中引入这两个组件,并将它们添加到declarations
数组中:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ParentComponent } from './parent.component';
import { ChildComponent } from './child.component';
@NgModule({
imports: [BrowserModule],
declarations: [ParentComponent, ChildComponent],
bootstrap: [ParentComponent]
})
export class AppModule { }
这样,就可以通过父组件将输入属性传递给子组件,并在子组件中使用这些属性了。在这个示例中,子组件会显示父组件传递的用户信息和一个布尔值。
上一篇:Angular 6多表列过滤