Angular 角度2：组件交互，可选输入参数

我有一个实现，其中父级希望通过使用子组件上可用的

@Input

参数将某些数据传递给子组件。但是，此数据传输是可选的，父级可以根据需要传递，也可以不传递。组件中是否可以有可选的输入参数。我在下面描述了一个场景：

 <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() { }

}

//传递参数
//不愿意传递任何参数
//子组件定义
@组成部分{
选择器：'app-child'，
“嗨，孩子们！
亚历克斯`
}
导出类子类{
@输入showName：布尔型；
构造函数（）{}
}

默认情况下，输入值是可选的。您的代码只有在尝试访问未实际传递的输入的属性时才会失败（因为这些输入是未定义的）

您可以实现或使输入成为setter而不是属性，以便在实际传递值时执行代码

导出类子类{
@输入集showName（值：布尔值）{
这个。_showName=value；
DoSomethingHenshowNameisPassed（值）；
}
构造函数（）{}
}

这里有两个选项

1） 如果输入为空时不需要显示子项，则可以在子项上使用

*ngIf

 <parent>
    <child *ngIf="true" [showName]="true"></child> //passing parameter
    <child></child> //not willing to passing any parameter
</parent>

您可以使用（？）运算符，如下所示

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() { }

}

从'@angular/core'导入{Component，Input}；
@组成部分({
选择器：'child'，
“嗨，孩子们！
亚历克斯`
})
导出类子组件{
@Input（）showName？：布尔值；
构造函数（）{}
}

使用子组件的父组件将作为

@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'
  }
}

@组件({
选择器：“我的应用程序”，
模板：`
你好{{name}
`,
})
导出类应用程序{
名称：字符串；
构造函数（）{
this.name='Angular2'
}
}

---

是的，您可以选择输入，如果输入已初始化或未初始化，请在ngAfterViewInit lifecycle event中检查。谢谢@galvan，它成功了！检查@galvan的评论，这似乎是一个更好的解决方案。检查@galvan的评论，这似乎是一个更好的解决方案。你为什么认为它更好？当父级必须向服务器发出请求，然后才将值传递给子级时，这可能是调用

ngAfterViewInit（）

后的一段时间

ngAfterViewInit（）

可能适用于您的具体情况，但通常我不推荐使用它。您的意思是，如果我在客户端动态更改值？正如您所解释的，我应该在child指令中调用setter方法吗？您不需要调用setter，但是如果您有

并且

propOnParent

在某个异步调用完成后被初始化，那么Angular会更新

中的

showName

输入，或者如果它是setter，使用更新的值调用setter。另外，如果您只关心静态绑定值，如问题中的

true

，

ngOnInit（）

是比

ngAfterViewChecked（）

更常见的生命周期挂钩。这应该是答案。也适用于默认值

@Input（）showName？：boolean=true

我想知道，与常规的

@Input（）showName:boolean有什么区别吗？然后检查是否为空？我的意思是-有什么区别？@RoyiNamir我想说的最重要的是，这是一种文档形式。通过放置？或者，您可以告知组件是否可以处理未定义的输入。此外，我认为strictNullChecks编译器选项@MatthiasTylkowski可以识别它。如果设置默认值，则将其设置为可选值没有意义，因为它将始终设置为某个值。@MatthiasTylkowski optional意味着showName属性可能不存在，然而，在默认情况下将其设置为true意味着它将始终存在，因此没有必要将其设置为可选。（此处null不相关，设置为null的属性仍然存在。可选仅与已定义或未定义相关。）-可选此处不指是否必须传入输入（默认情况下输入是可选的），而是指类上是否必须存在属性showName。
@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'
  }
}