Angular2:组件交互,可选入参
Angular 2: Component Interaction, optional input parameters
我有一个实现,其中 parent 想要通过使用 child 组件可用的 @Input
参数将某些数据传递给 child 组件。但是,此数据传输是可选的,parent 可能会或可能不会根据要求传递它。组件中是否可以有可选的输入参数。我在下面描述了一个场景:
<parent>
<child [showName]="true"></child> //passing parameter
<child></child> //not willing to passing any parameter
</parent>
//child component definition
@Component {
selector:'app-child',
template:`<h1>Hi Children!</h1>
<span *ngIf="showName">Alex!</span>`
}
export class child {
@Input showName: boolean;
constructor() { }
}
默认情况下输入值是可选的。您的代码仅在尝试访问实际未传递的输入的属性时才会失败(因为这些输入是 undefined
)。
您可以实现 OnChanges 或将输入设为 setter 而不是 属性,以便在实际传递值时执行您的代码。
export class child {
@Input set showName(value: boolean) {
this._showName = value;
doSomethingWhenShowNameIsPassed(value);
}
constructor() { }
}
这里有两个选择。
1) 您可以在子项上使用 *ngIf
以防子项在输入为空时不需要显示。
<parent>
<child *ngIf="true" [showName]="true"></child> //passing parameter
<child></child> //not willing to passing any parameter
</parent>
2) 如果子项在没有任何输入的情况下显示,您可以使用修改后的 setter 检查是否存在输入变量`
在child.ts中:
private _optionalObject: any;
@Input()
set optionalObject(optionalObject: any) {
if(optionalObject) this._optionalObject = optionalObject;
}
get optionalObject() { return this._optionalObject; }
您可以使用 ( ? ) 运算符,如下所示
import {Component,Input} from '@angular/core';
@Component({
selector:'child',
template:`<h1>Hi Children!</h1>
<span *ngIf="showName">Alex!</span>`
})
export class ChildComponent {
@Input() showName?: boolean;
constructor() { }
}
使用子组件的父组件将如
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
<child [showName]="true"></child>
<child ></child>
</div>
`,
})
export class App {
name:string;
constructor() {
this.name = 'Angular2'
}
}
我有一个实现,其中 parent 想要通过使用 child 组件可用的 @Input
参数将某些数据传递给 child 组件。但是,此数据传输是可选的,parent 可能会或可能不会根据要求传递它。组件中是否可以有可选的输入参数。我在下面描述了一个场景:
<parent>
<child [showName]="true"></child> //passing parameter
<child></child> //not willing to passing any parameter
</parent>
//child component definition
@Component {
selector:'app-child',
template:`<h1>Hi Children!</h1>
<span *ngIf="showName">Alex!</span>`
}
export class child {
@Input showName: boolean;
constructor() { }
}
默认情况下输入值是可选的。您的代码仅在尝试访问实际未传递的输入的属性时才会失败(因为这些输入是 undefined
)。
您可以实现 OnChanges 或将输入设为 setter 而不是 属性,以便在实际传递值时执行您的代码。
export class child {
@Input set showName(value: boolean) {
this._showName = value;
doSomethingWhenShowNameIsPassed(value);
}
constructor() { }
}
这里有两个选择。
1) 您可以在子项上使用 *ngIf
以防子项在输入为空时不需要显示。
<parent>
<child *ngIf="true" [showName]="true"></child> //passing parameter
<child></child> //not willing to passing any parameter
</parent>
2) 如果子项在没有任何输入的情况下显示,您可以使用修改后的 setter 检查是否存在输入变量`
在child.ts中:
private _optionalObject: any;
@Input()
set optionalObject(optionalObject: any) {
if(optionalObject) this._optionalObject = optionalObject;
}
get optionalObject() { return this._optionalObject; }
您可以使用 ( ? ) 运算符,如下所示
import {Component,Input} from '@angular/core';
@Component({
selector:'child',
template:`<h1>Hi Children!</h1>
<span *ngIf="showName">Alex!</span>`
})
export class ChildComponent {
@Input() showName?: boolean;
constructor() { }
}
使用子组件的父组件将如
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
<child [showName]="true"></child>
<child ></child>
</div>
`,
})
export class App {
name:string;
constructor() {
this.name = 'Angular2'
}
}